javascript - FOR 循环计数

Question

我有以下代码，我试图简单地计数到十，FOR loop通过每次迭代我想用它jQuery来更新一个 div 元素的值i

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

问题是，循环将执行并且在完成之前不会显示任何内容，这只是数字 10。

有没有办法实现我所需要的？

谢谢

score 8 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

尝试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 ，等待时间为 100 毫秒而不是 10 秒，用于测试目的。

3 回答 3