Я не мог отобразить случайные изображения без дубликатов

Question

Привет, я работаю над задачей, которая будет отображать случайные изображения.Код, который у меня есть, показывает случайные изображения, но на самом деле я хочу отображать случайные изображения без дубликатов.Как это сделать.Помоги мне.Заранее спасибо.

var images = ['https://cdn.paperindex.com/banner/advertisement/1.jpeg', 'https://cdn.paperindex.com/banner/advertisement/2.jpeg', 'https://cdn.paperindex.com/banner/advertisement/3.jpeg', 'https://cdn.paperindex.com/banner/advertisement/4.jpeg'];

var imagesused = [];
$('.advertisement div').each(function() {
  var rand = Math.floor(Math.random() * images.length);
  $(this).append('<img src="' + images[rand] + '"/>');
  if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
  else imagesused.push(images[rand]);
});

.advertisement div img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="advertisement">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

Мой подход был бы таким: этот способ может рандомизировать их независимо от того, насколько мал или велик ваш массив

сначала создайте метод, который перемешивает их

    function shuffle(a) {
        var j, x, i;
        for (i = a.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = a[i];
            a[i] = a[j];
            a[j] = x;
        }
        return a;
    }

, а затем выиспользуйте его перед циклом вашего массива

images = shuffle(images);

var images = ['https://cdn.paperindex.com/banner/advertisement/1.jpeg', 'https://cdn.paperindex.com/banner/advertisement/2.jpeg', 'https://cdn.paperindex.com/banner/advertisement/3.jpeg', 'https://cdn.paperindex.com/banner/advertisement/4.jpeg'];

function shuffle(a) {
	var j, x, i;
	for (i = a.length - 1; i > 0; i--) {
	    j = Math.floor(Math.random() * (i + 1));
	    x = a[i];
	    a[i] = a[j];
	    a[j] = x;
	}
	return a;
}

   images = shuffle(images);

var imagesused = [];
$('.advertisement div').each(function(x) {
  $(this).append('<img src="' + images[x] + '"/>');
});

.advertisement div img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="advertisement">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

Сделать копию исходного массива.И после добавления случайного изображения удалите его из копии массива. Вам не нужно создавать imagesUsed при удалении его из массива.

var images = ['https://cdn.paperindex.com/banner/advertisement/1.jpeg', 'https://cdn.paperindex.com/banner/advertisement/2.jpeg', 'https://cdn.paperindex.com/banner/advertisement/3.jpeg', 'https://cdn.paperindex.com/banner/advertisement/4.jpeg'];
//making copy of original array.
var tempImgs = images.slice(0)
$('.advertisement div').each(function() {
  var rand = Math.floor(Math.random() * tempImgs.length);
  $(this).append('<img src="' + tempImgs[rand] + '"/>');         
  tempImgs.splice(rand, 1);
});

.advertisement div img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="advertisement">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>