我需要在此代码中添加什么来阻止随机生成的图像重复自己？

Question

您好，我已尝试找到解决此问题的方法并且正在苦苦挣扎。我对 Javascript 很陌生！此代码可在单击按钮时生成随机图像，但图像会随机重复。我想显示所有图像，但不重复已经显示的图像。我知道我应该添加一个 for 循环和 if 语句，但不知道如何编写它。这些只是数组中的几个示例图像，我实际上将在最后的东西中有 55 个图像。谁能帮我！？谢谢！ :)

当前代码：

const imageArray = [
    "https://images.unsplash.com/photo-1508185159346-bb1c5e93ebb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=55cf14db6ed80a0410e229368963e9d8&auto=format&fit=crop&w=1900&q=80",
    "https://images.unsplash.com/photo-1495480393121-409eb65c7fbe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05ea43dbe96aba57d48b792c93752068&auto=format&fit=crop&w=1351&q=80",
    "https://images.unsplash.com/photo-1501611724492-c09bebdba1ac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ebdb0480ffed49bd075fd85c54dd3317&auto=format&fit=crop&w=1491&q=80",
    "https://images.unsplash.com/photo-1417106338293-88a3c25ea0be?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d1565ecb73a2b38784db60c3b68ab3b8&auto=format&fit=crop&w=1352&q=80",
    "https://images.unsplash.com/photo-1500520198921-6d4704f98092?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ac4bc726064d0be43ba92476ccae1a75&auto=format&fit=crop&w=1225&q=80",
    "https://images.unsplash.com/photo-1504966981333-1ac8809be1ca?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9a1325446cbf9b56f6ee549623a50696&auto=format&fit=crop&w=1350&q=80"
];

const image = document.querySelector("img");
const button = document.querySelector("button");

window.onload = () => generateRandomPicture(imageArray);

button.addEventListener("click", () => generateRandomPicture(imageArray));

function generateRandomPicture(array){
    let randomNum = Math.floor(Math.random() * array.length); 
    image.setAttribute("src", array[randomNum]);
}

Answer 1

这应该清楚地解释如何使用event listeners 和众所周知的Fisher-Yates shuffle 算法来做到这一点。如果洗牌数组的第一项与当前图像匹配，则重复洗牌（通过do-while 循环）以避免连续显示同一图像两次。

window.addEventListener('DOMContentLoaded', () => {

  // Identifies DOM elements and other constants
  const
    changeButton = document.getElementById("change-button"),
    displayDiv = document.getElementById("display-div"),
    imageArray = ["image 1", "image 2", "image 3", "image 4", "image 5"],
    HIGHEST_INDEX = imageArray.length - 1;

  // Calls `changeImage` whenever changeButton is clicked
  changeButton.addEventListener("click", changeImage);

  // Forces shuffle on first click
  let currentIndex = HIGHEST_INDEX;

  // Defines listener for click events
  function changeImage(){

    // If we're at the end of the array, we need to shuffle...
    if(currentIndex == HIGHEST_INDEX){

      // Remembers the current image
      const currentImage = imageArray[currentIndex];

      // Keeps calling `shuffle` until next image ≠ current image
      do { shuffle(imageArray); }
      while (imageArray[0] === currentImage);
      
      // Prepares to start from beginning of shuffled array
      currentIndex = -1;
    }
    
    //Regardless, increments index and shows corresponding image 
    displayDiv.textContent = imageArray[++currentIndex];
  }


  // Implements Fisher-Yates shuffle
  function shuffle(arr, randIndex=NaN, temp=null){

    // Starts i at the highest index & works backwards through array
    let i = arr.length - 1;
    while(i-- > 0){   
      
      // Gets random index from remaining (unswapped) indexes
      rand = Math.floor(Math.random() * (i + 1));

      // Swaps the value at the random index with the value at i
      temp = arr[rand];
      arr[rand] = arr[i];
      arr[i] = temp;
    }
  }
});

#display-div {margin-top: 0.5em; }

<button id="change-button">CHANGE IMAGE</button>
<div id="display-div"></div>

Answer 2

我认为这更像是您想要做的。 （我的另一个答案允许重复循环遍历同一个列表并每次随机化它，但对于宾果游戏，你不需要所有这些。）

populateImgs 函数获取一个 url 列表并遍历页面上的所有 img 元素，将每个 src 属性设置为不同的 url，或者如果 url 太少而无法填充所有 img 则失败。当函数被调用时，urls 参数是从一个打乱的部分 url 列表中动态构建的。 （生成的 url 比您的原始 url 短，其中包含许多我为简洁而省略的参数。）

shuffle 函数使用相同的算法，但实现方式略有不同（使用看起来更简洁的while(--i > 0){ swap(array, i, randLessThan(i)); }）。

window.addEventListener('DOMContentLoaded', function(){

  // Defines an array of strings that identify photos
  const photoIds = [
    "1508185159346-bb1c5e93ebb4", "1495480393121-409eb65c7fbe",
    "1501611724492-c09bebdba1ac", "1417106338293-88a3c25ea0be",
    "1500520198921-6d4704f98092", "1504966981333-1ac8809be1ca"
  ];        

  // Calls `populateImgs`, w/ a list of randomized urls based on photoIds
  populateImgs(
    shuffle(photoIds).map(id => `https://images.unsplash.com/photo-${id}`)
  );


  function populateImgs(urls){
    // Shows one photo in each img element
    const imgs = document.querySelectorAll("img");        
    if(urls.length < imgs.length){ return console.log("Not enough photos"); }
    
    let index = -1;
    while (++index < imgs.length){
      imgs[index].setAttribute("src", urls[index]);
    };
  }

  function shuffle(array){
    // Uses helper functions to randomize array, returns randomized array

    const
      randLessThan = (num) => Math.floor(Math.random() * num),
      swap = (arr, i, rand) => { let temp=arr[rand]; arr[rand]=arr[i]; arr[i]=temp; };

    // Iterates backwards, swaps each item with a random earlier item, ignores i==0
    let i = array.length;
    while(--i > 0){ swap(array, i, randLessThan(i)); }
    return array; 
  }

});

img{ width: 100px; height: 80px; object-fit: cover; margin: 15px; }

<div class="row">
  <img/><img/>
</div>
<div class="row">
  <img/><img/>
</div>