循环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的值为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

在你的例子中，你说“从现在起分别为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);

Answer 3

希望这会有所帮助：

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();
  }
}