循环超时使用随机数生成器

Question

这个脚本应该以随机生成的延迟滚动浏览网站上的每个容器。对于循环中的每次迭代，我要将2000ms的“暂停”替换为一个在min和max秒之间随机生成的数字。

var min = 3,
    max = 9;
var y = document.querySelectorAll('.chunk-container').length;

for (let x=0; x<y; x++) {
   task(x);
}

function task(x) {
//    var z = randomGen() * 1000;
    setTimeout(function() {
        console.log('X = ' + x + ' Y = ' + y);
            document.getElementsByClassName('chunk chunk-container')[x].scrollIntoView({behavior: 'smooth'});
            console.log('Scrolled to next Container');
    }, /* z */ 2000 * x);
}
})

随机数生成器：

function randomGen() {
    var rand = Math.floor(Math.random() * (max - min + 1) + min);
    console.log('Random Number generated: ' + rand + ' seconds');
    return rand;
}

就像这样工作很好。在每次迭代之后，会有2秒的暂停。但是，当我移除注释以添加var z=randomGen()*1000；行以随机化每次迭代之间的时间时，x值（它应该滚动到哪个容器）一开始很好，但后来也变成随机的。

控制台输出：

Random Number generated: 6 seconds
Random Number generated: 5 seconds
Random Number generated: 4 seconds
Random Number generated: 8 seconds
Random Number generated: 4 seconds
Random Number generated: 8 seconds
X = 0 Y = 7
Scrolled to next Container
X = 1 Y = 7
Scrolled to next Container
X = 2 Y = 7
Scrolled to next Container
X = 4 Y = 7
Scrolled to next Container
X = 3 Y = 7
Scrolled to next Container
X = 5 Y = 7
Scrolled to next Container
X = 6 Y = 7
Scrolled to next Container

我该怎么解决这个？

Answer 1

我改写了你的代码。我认为主要问题是settimeout是非阻塞的。我使用promise和await来解决它

function sleep(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}

function randomGen(max, min) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

async function randomWaitAndScroll(elements, timeMin, timeMax) {
  for (element of elements) {
    let random = randomGen(timeMin, timeMax)
    await sleep(random);
    element.scrollIntoView({behavior: 'smooth'});
  }
}

const containerElements = document.querySelectorAll('.chunk-container');
randomWaitAndScroll(containerElements, 3000, 9000);