Javascript setTimeout 随机定时器延迟按顺序显示数组项

Question

我编写了以下代码，使用随机计时器延迟显示数组的每一项。

const letters = ['H', 'e', 'l', 'l','o'];
const typeLetters = _ => {
    letters.forEach((letter) => {
        let ranNum = Math.ceil(Math.random() * 1000);
        setTimeout(function(ranNum) {
            lettersCon.textContent += letter;
        }, ranNum * 1);
    })
}

我遇到的问题是数组项没有按顺序显示，应该显示 Hello。我相信这是由于事件循环的工作原理。

如何在保持输出顺序的同时使用随机定时器延迟。

Answer 1

这样的事情怎么样？

const letters = ['H', 'e', 'l', 'l','o'];
const typeLetters = _ => {
    let total= 0;
    letters.forEach((letter) => {
        let ranNum = Math.ceil(Math.random() * 1000);
        total+=ranNum;
        setTimeout(function(ranNum) {
            lettersCon.textContent += letter;
        }, total);
    })
}

Javascript setTimeout 随机定时器延迟按顺序显示数组项

Javascript setTimeout with random timer delay displaying array items in order

javascript

settimeout