循環setTimeout

Question

我目前正試圖圍繞一些JavaScript包圍我的頭。

我要的是屏幕後面是數給定數量上打印文本，像這樣：

「測試」

[1秒。暫停]

「1」

[1秒。暫停]

「2」

[1秒。暫停]

「3」

這是我的JS：

$(document).ready(function() { 

    var initMessage = "Test"; 
    var numberCount = 4;  

function count(){ 

    writeNumber = $("#target"); 

    setTimeout(function(){ 
     writeNumber.html(initMessage); 
    },1000); 

     for (var i=1; i < numberCount; i++) { 

    setTimeout(function(){ 
     writeNumber.html(i.toString()); 
    },1000+1000*i)}; 

}; 

count(); 

}); 

這是我的標記：

<span id="target"></span> 

當我渲染頁面，我得到的是「測試「後跟」4「。

我不是JavaScript的天才，所以解決方案可能相當簡單。任何有關錯誤的提示都非常感謝。

可以玩弄我在這裏的例子：http://jsfiddle.net/JSe3H/1/

Answer 1

你有一個變量範圍的問題。循環內的計數器（i）僅適用於count函數。在循環執行完成時，i的s值爲4.這會影響每個setTimeout函數，這就是爲什麼您只能看到「4」的原因。

我想重寫這樣的：

function createTimer(number, writeNumber) { 
    setTimeout(function() { 
     writeNumber.html(number.toString()); 
    }, 1000 + 1000 * number) 
} 

function count(initMessage, numberCount) { 
    var writeNumber = $("#target"); 

    setTimeout(function() { 
     writeNumber.html(initMessage); 
    }, 1000); 

    for (var i = 1; i < numberCount; i++) { 
     createTimer(i, writeNumber); 
    } 
} 

$(document).ready(function() { 

    var initMessage = "Test"; 
    var numberCount = 4; 


    count(initMessage, numberCount); 

}); 

的createTimer功能確保循環內的變量被「俘獲」與新的範圍內的是createTimer提供。

更新了例：http://jsfiddle.net/3wZEG/

還檢查了以下相關問題：

• What's going on under the hood here? Javascript timer within a loop
• JavaScript closure inside loops – simple practical example

Answer 2

希望這有助於：

 
var c=0; 
var t; 
var timer_is_on=0; 

function timedCount() 
{ 
document.getElementById('target').value=c; 
c=c+1; 
t=setTimeout("timedCount()",1000); 
} 

function doTimer() 
{ 
if (!timer_is_on) 
    { 
    timer_is_on=1; 
    timedCount(); 
    } 
} 

Answer 3

在你的例子中，你說的是「現在2,3,4和5秒，分別寫入i的值」。您的for循環將通過所有迭代，並且在前兩秒鐘過去很久之前將值i設置爲4。

您需要創建一個閉包，其中您要寫入的值的值將被保留。事情是這樣的：

for(var i = 1; i < numberCount; i++) { 
    setTimeout((function(x) { 
     return function() { 
      writeNumber.html(x.toString()); 
     } 
    })(i),1000+1000*i)}; 
} 

另一種方法完全是這樣的：

var i = 0; 
var numberCount = 4; 

// repeat this every 1000 ms 
var counter = window.setInterval(function() { 

    writeNumber.html((++i).toString()); 

    // when i = 4, stop repeating 
    if(i == numberCount) 
     window.clearInterval(counter); 

}, 1000);