for循环计数

我有下面的代码，我想简单地使用FOR loop每次迭代我想用jQuery与ifor循环计数

for (i=0;i<=10;i++){ 
    setTimeout(function(){ 
     $(".test").html(i); 
    },10000); 
}

JSFIDDLE值更新div元素数到十

的问题是，该循环将执行，直到完成，这将仅仅是数字10

有没有办法实现我需要什么不显示什么？

感谢

来源

2012-05-13 Rory Standley

的问题是不是循环 - 这就是你选择来实现计数器的方式。几乎在同一时间，您可以有效地设置10个超时。 – rjz

http://jsfiddle.net/zerkms/GgzFW/4/ – zerkms

可能的dups：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example和http：// stackoverflow .com/questions/10242254/settimeout-in-for-loop-with-random-delay – ajax333221

由于封闭效应，您的代码无法按预期工作。它通常是通过创建另一种是正确的它被创建后调用匿名函数解决：

for (i=0;i <= 10;i++){ 
    (function(i) { 
     setTimeout(function(){ 
      $(".test").html(i); 
     }, i * 1000); 
    })(i); 
}

http://jsfiddle.net/zerkms/GgzFW/4/

来源

2012-05-13 22:18:06 zerkms

当只有10个时，没什么大不了的，但JavaScript定时器出了名的不准确。如果你还有其他几个，我想你会发现随着定时器的启动，它们开始以不同的时间间隔发生。如果你打算使用'setTimeout'而不是'setInterval'，你应该使用递归来调用每个后续的。 –

@疯狂的崖壁：这取决于目标。递归解决方案也不准确，其总执行时间总是比预期的要长。 – zerkms

我认为这是一个公平点。它在整体上会更加一致（在某些浏览器中比其他浏览器更引人注目），但它确实需要间隔之间的一些工作。 –

demo jsFiddle

var i = 0, 
    T =setInterval(function(){ 
     i < 10 ? $(".test").html(++i) : clearInterval(T);  
    },1000); 

$(".test").html(i);

来源

2012-05-13 22:14:43

尝试使用setInterval()代替：

var i = 0; 

var timer = setInterval(function() { 
    $('.test').html(i); 

    i++; 

    if(i > 10) { 
     clearInterval(timer); 
    } 
}, 10000);

您当前的循环将循环快，因为它可以，并设置10个超时大约发生在10秒循环被调用后。 setInterval()所做的就是每10秒传递给它的函数中的代码，实际上延迟了循环。

if()语句在其结尾处停止发生的时间间隔，如果i > 10通过清除间隔被给定的变量引用。

我已经分叉了你的JSFiddle here，用100ms的等待时间而不是10s来进行测试。

来源

2012-05-13 22:16:35 Bojangles

我刚刚发表评论说你应该使用'clearInterval'而不是'clearTimeout'，但它似乎可以工作。你知道这是否可靠跨浏览器？ –

@cliffsofinsanity良好的发现 - 谢谢。这只是我的一个错字。我不知道它是否可以跨浏览器工作，但它在Chromium中工作良好。尽管对于'setInterval（）'坚持'clearInterval（）'，但是:) – Bojangles

回答

相关问题