在JavaScript循環中插入setInterval

Question

我在將setInterval插入for循環時遇到問題。 我希望數組中的單詞在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.

這將貫穿您的字符串，直到沒有剩余的單詞為止。