循环setTimeout

我目前正试图围绕一些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(); }); 

这是我的标记：

当我渲染页面时，我得到的只是“Test”，然后是“4”。

我不是JavaScript天才，所以解决方案可能相当容易。 任何关于错误的提示都受到高度赞赏。

你可以在这里玩我的例子： http ： //jsfiddle.net/JSe3H/1/

Answer 1

你有一个可变范围问题。 循环内的计数器（ i ）仅限于countfunction。 当循环执行完毕时， 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/

另请查看以下相关问题：

• 引擎盖下发生了什么？ 循环中的Javascript计时器
• 循环内的JavaScript闭包 - 简单实用的例子

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（ '目标'）值= C;
 C = C + 1;
 T =的setTimeout（ “timedCount（）”，1000）;
 }

函数doTimer（）
 {
 if（！timer_is_on）
   {
   timer_is_on = 1;
   timedCount（）;
   }
 }