Javascript 循环计数

我有下面的代码，我正在尝试使用

FOR循环

简单地数到10，通过每次迭代，我想使用

jQuery

更新一个div元素的值

I

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

（i=0；i

var i=0，
T=设置间隔（函数（）{
i<10（“.test”）.html（++i）：clearInterval（T）；
},1000);
$（“.test”）.html（i）；

var i=0，
T=设置间隔（函数（）{
i<10（“.test”）.html（++i）：clearInterval（T）；
},1000);
$（“.test”）.html（i）；

尝试改用

setInterval（）

：

var i = 0;

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

    i++;

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

当前循环将以尽可能快的速度循环，并将10个超时设置为在调用循环后大约10秒内发生。

setInterval（）

所做的是每10秒调用传递给它的函数中的代码，实际上延迟了循环

如果

i>10

，则其末尾的

if（）

语句通过清除间隔所引用的变量来停止间隔的发生

---

我为您的JSFIDLE提供了100毫秒的等待时间，而不是10秒的测试时间。

尝试使用

setInterval（）

：

var i = 0;

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

    i++;

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

当前循环将以尽可能快的速度循环，并将10个超时设置为在调用循环后大约10秒内发生。

setInterval（）

所做的是每10秒调用传递给它的函数中的代码，实际上延迟了循环

如果

i>10

，则其末尾的

if（）

语句通过清除间隔所引用的变量来停止间隔的发生

---

我已经为您的JSFIDLE设置了100毫秒的等待时间，而不是10秒的测试时间。

由于闭包效应，您的代码无法按预期工作。通常可以通过创建另一个匿名函数来解决，该函数在创建后立即调用：

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

---

for（i=0；i由于闭包效应，您的代码无法按预期工作。通常通过创建另一个匿名函数来解决此问题，该函数在创建后立即调用：

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

用于（i=0；i）问题不在于循环，而在于你选择实现计数器的方式。你几乎在同一时间点上设置了10个超时。可能的重复：问题不在于循环，而在于你选择实现计数器的方式。你几乎在同一时间点上设置了10个超时。possib重复：当只有10个时，这没什么大不了的，但是JavaScript计时器是出了名的不准确。如果你有更多的计时器，我想你会发现当计时器启动时，它们开始以不同的间隔发生。如果你要使用
setTimeout
而不是
setInterval
，你应该让后面的每一个调用使用递归时会被忽略。@cliffs of Inashy:这取决于目标。递归解决方案也不准确，它的总执行时间总是比预期的要长。我认为这是一个公平的观点。它总体上更符合视觉（在某些浏览器中比在其他浏览器中更明显），但它确实需要在间隔之间做一些工作。@cliffs of Inashy:是的。无论如何，谢谢你的提及，让OP选择更适合他的需要的东西。当只有10个时，这没什么大不了的，但是JavaScript计时器是出了名的不准确。如果你还有几个，我想你会发现，随着计时器的启动，它们开始以不同的速度发生间隔。如果您要使用
setTimeout
而不是
setInterval
，那么您可能应该使用递归调用后续的每个值。@疯狂悬崖：这取决于目标。递归解决方案也不准确，其总执行时间将始终大于预期。我认为这是一个公平的点。它将是总体上更符合视觉（在某些浏览器中比在其他浏览器中更明显），但在间隔之间确实需要一些工作。@cliffs of Inashy:是的。无论如何，谢谢你的提醒，让OP选择更适合他的需要的东西。我正要评论说，你应该使用
clearInterval
，而不是
clearTimeout
，但这两种方法似乎都有效。你知道这在整个浏览器中是否可靠吗rs？@CliffsofInasenacy很好的捕获-谢谢。这只是我的一个输入错误。我不知道它是否可以跨浏览器工作，但它在Chromium环境下工作良好。但是，对于
setInterval（）
，请坚持使用
clearInterval（）
。）我正要评论说你应该使用
clearInterval
而不是
clearTimeout
，但这两种方法似乎都有效。你知道这在不同浏览器中是否可靠吗？@cliffsofEnashancy很好，谢谢。这只是我的一个输入错误。我不知道它是否可以跨浏览器使用，但在Chromium中也可以。坚持下去<代码>clearInterval（）
用于
setInterval（）
，但：）