我如何才能使它一旦使用數組中的值，就不能在數組完成后再次使用？

Question

在網站上，我希望有人單擊按鈕時顯示隨機圖片。 圖片的URL包含在數組中的javascript文件中。 到目前為止，它工作正常，但是我想這樣做，以便一旦顯示圖片，就無法再次顯示它，直到顯示陣列中的所有其他項目為止。 換句話說，我不希望任何圖片出現兩次，直到陣列中的所有圖片都完成為止。 我要在下面的代碼中添加什么？

var images = 
["sample1.png", 
"sample2.png", 
"sample3.png", 
"sample4.png", 
"sample5.png", 
"sample6.png", 
"sample7.png"];
var rand = images[Math.round(Math.random() * (images.length - 1))];

function test(){
rand = images[Math.round(Math.random() * (images.length - 1))];
document.getElementById("picture").style.background = "url('/images/"+rand+"') no-repeat center center";
}

Answer 1

你可以這樣使用

跟蹤剩余的可能性，並在沒有新的可能性時重置。

在這種情況下，我使用了字符串數組，但是原理是相同的:)

jsfiddle： http : //jsfiddle.net/D3XSY/

var messages = ['hello', 'there', 'this', 'is', 'a', 'test'];
var available = [].concat(messages);
var interval;

function update(id) {
    if (available.length === 0) {
        available = [].concat(messages);
    }
    var ri = Math.floor(Math.random() * available.length);
    var msg = available[ri], el = document.getElementById(id);
    if (el) {
        el.innerHTML = msg;
    }
    available.splice(ri, 1);
}

interval = setInterval(update.bind(null, 'promo'), 500);

Answer 2

你可以做這樣的小提琴

基本上保留可用圖像的運行列表，並在使用完所有圖像后將其重置。

var defaultImages = ["sample1.png", "sample2.png", "sample3.png", "sample4.png", "sample5.png", "sample6.png", "sample7.png"],
    availImages = [],
    randomImage = '',
    button = document.getElementById('testButton');

button.onclick = test;

function test()
{
    if(availImages.length == 0)
            availImages = defaultImages.slice(0);

    randomImage = availImages[Math.floor(Math.random() * availImages.length)];

    var index = 0;
    for(indexLength = availImages.length; index < indexLength; index++)
    {
        if(availImages[index] == randomImage)
            break;
    }

    availImages.splice(index, 1)
    console.log(randomImage);
}