在 javascript 的循环中插入 setInterval

Question

我无法在 for 循环中插入 setInterval。我希望数组中的单词在 div 中一次显示一个，延迟 1 秒（可变）。目前，它仅在延迟 1 秒后显示数组的最后一个字。

var words = input.split(/[ \t\n]+/);
var temp = 0;
for(var i=0; i<words.length ;i++) {
    setInterval(function() {document.getElementById("display").innerHTML = words[temp];
        temp++;},1000);
    document.getElementById("display").innerHTML = "";}

Answer 1

您正在将间隔设置为发生 words.length 次，全部发生在循环运行之后的 1 秒标记处。结果：所有单词都在同一帧中依次显示，只留下最后一个。

我建议采用不同的方法。

var words = input.split(/\s+/); // "any whitespace"
function nextWord() {
    document.getElementById('display').innerHTML = words.shift();
    if( words.length > 0) setTimeout(nextWord,1000);
    else alert("Done!"); // you can do something else here
}
setTimeout(nextWord,1000);
// or just call nextWord() if you want the first word to appear immediately.

这会遍历您的字符串，直到没有单词为止。

在 javascript 的循环中插入 setInterval

Insterting setInterval inside a loop in javascript

javascript

loops

for-loop

setinterval