如何在JavaScript中创建多个实例

Question

我试图生成随机数来从数组中挑选随机项目来更新图片拼贴，我注意到有时生成的数字与之前生成的数字相同，导致一张图片更新2-3次，因此为了检查这一点，我认为如果我将上次生成的随机数存储到一个变量中，并创建一个函数来检查上次生成的值是否等于当前生成的值，它将继续生成数字，直到生成一个不相等的值。

它工作得很好，直到我想要多个实例...因为存储最后一个值的变量是相同的，所以我得到了相同的数字。

var bgs = document.getElementById('collage').getElementsByClassName('bg');
var images = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var lv = null;
function get_random(length) {
    arr = [];
    while (arr.length < 1) {
        var cv = Math.floor(Math.random() * length);
        if (lv === cv) {
            arr = [];
            continue;
        }
        else if (lv !== cv) {
            arr.push(cv);
            break;
        }
    }
    lv = arr[0];
    return arr[0];
}

function update_collage() {
    var img = images[get_random(images.length)];
    var target = bgs[get_random(bgs.length)];
    target.style.background = "url('assets/img/thumbs/" + img + ".jpg') no-repeat center";
    target.style.backgroundSize = "cover";
}
window.setInterval(function(){
    update_collage();
}, 1200);

如何更正此错误，如何创建函数或变量的多个实例

Answer 1

我建议使用生成器函数，并根据需要经常实例化它：

// Generate pairwise unique random numbers < max:  
function* generate_random(max) {
  let prev;
  while (true) {
    let next = Math.floor(Math.random() * max);
    if (prev === next) continue;
    yield prev = next;
  }
}

// Example:
let generators = [generate_random(3), generate_random(3)];

for (let i = 0; i < 10; ++i) {
  // Both generators run independently:
  console.log(generators[0].next().value, generators[1].next().value);
}

​

在你的代码中，你可以替换

var img = images[get_random(images.length)];
var target = bgs[get_random(bgs.length)];

使用

var img = images[generators[0].next().value];
var target = bgs[generators[1].next().value];

哪里

var generators = [generate_random(images.length), generate_random(bgs.length)];