使用setTimeout的成炭

我試圖做一些很簡單的打印字符的字符串，但它不工作，我想不通爲什麼。我正在嘗試將一些文本寫入div，以使文本一次顯示一個字符;有點像矩陣中的那個場景。使用setTimeout的成炭

var message = document.getElementById("message"); 
    function writeMessage(string) { 
    message.innerHTML = string.charAt(0); 
    for (var i = 1; i < string.length; i++) { 
     window.setTimeout(function() {message.innerHTML+=string.charAt(i);},1000); 
    } 
    } 
    writeMessage("Hello world");

要看到我的代碼的無爲行動，見JSFiddle。如你所知，它只顯示第一個字符，就像setTimeout根本沒有執行該函數一樣。在實際執行

來源

2014-02-05 Era

的setTimeout將調用insde功能在1秒。它不會凍結程序，循環將繼續。所以你基本上在1秒後傳輸整個字符串打印。 –

，你傳遞給setTimeout功能的循環完成i變量將等於string.length在執行時後。您可以嘗試通過存儲i給一個臨時變量，或通過使用IIFE來解決這個問題。但是，您用setTimeout註冊的所有函數實例最終都會在大約同一時間執行，因此您將看不到任何動畫。

也許嘗試使用setInterval，像這樣：

function writeMessage(string) { 
    var i = 0, intervalId; 
    intervalId = window.setInterval(function() { 
     message.innerHTML += string.charAt(i++); 
     if (i > string.length) 
      window.clearInterval(intervalId); 
    }, 100); 
} 

writeMessage("Hello world");

Demonstration

來源

2014-02-05 23:39:03

謝謝，這似乎很好地工作。你能提供任何見解，爲什麼我的方法無效嗎？ – Era

@ user3264259我在回答的第一部分中包含了一些問題的解釋。你有什麼具體問題？ –

感謝您的解釋，我明白現在發生了什麼。 – Era

function writeMessage(text) { 
    message.innerHTML = ""; 

    for (var i = 0; i < text.length; i++) { 
     setTimeout(function (char) { 
      return function() { message.innerHTML += char; }; 
     }(text[i]), i * 1000); 
    } 
}

來源

2014-02-05 23:44:12 dresende

感謝您的回覆。任何想法如何防止[this]（http://jsfiddle.net/ddWs3/1/）在多次調用writeMessage時發生？我希望它在第一條消息寫完第二條消息之前等待它。 – Era

您將不得不存儲鎖定變量並排列後續消息。這會使代碼更復雜一些。也許創建一個對象來處理這一切。 – dresende

使用setTimeout的成炭

回答

相關問題