javascript - 避免使用随机图像阵列重复 - 首先循环浏览所有图像

Question

我在这里和其他地方寻找过一些帮助，但没有成功。发生了什么:同一张图像将连续显示多次。我希望发生的情况:在开始显示已显示的图像之前，所有图像将随机显示。

任何帮助将不胜感激。

var total_images = 4;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<a href="/page1"><img src="/images/img1.png"></a>';
random_img[1] = '<a href="/page2"><img src="/images/img2.png"></a>';
random_img[2] = '<a href="/page2"><img src="/images/img3.png"></a>';
random_img[3] = '<a href="/page3"><img src="/images/img4.jpg"></a>';
document.write(random_img[random_number]);

Answer 1

几天前我编写了一个函数来完成此任务。将 random_img 传递到其中并使用结果。 (注意，这使用了 lodash，所以如果你想避免这种情况，请实现你自己的随机数系统)。

var jumble = function(arr) {
    var len = arr.length
    var newArr = [];
    arr.forEach(function(n) {
        var rand = _.random(len-1);
        while (newArr[rand] != undefined) {
            // find next unused place in newArr
            rand = (rand + 1) % len;
        }
        newArr[rand] = n;
    });
    return newArr;
};