循环中 setTimeout 的 Jquery 用法

Jquery usage of setTimeout in loop

本文关键字：Jquery 用法 setTimeout 循环      更新时间：2023-09-26

我想将 p 的值从 10 更改为 1，延迟 10 秒。

for (var i=0;i<9;i++) {
    setTimeout(function(){$('#timer').text(10-i)}, 1000);
}
它

需要值 1 1 秒，我希望它变成 10 然后是 9 然后是 8 等。这是小提琴。我的错误是什么？

使用 setInterval 来实现此目的，如下所示：-

    var i=0;
     var timer= setInterval(function(){
          i++;
          if(i==10){
            clearInterval(timer);    
          }
          $('#timer').text(10-i); 
      }, 1000);

在您的代码中，for循环不会等待setTimeout完成。 因此，当setTimeout等待时.. for loop结束了.因此，一秒钟后for loop结束了..i 的值为 9，显示 10-9=1 ..

这是链接 http://jsfiddle.net/1g8e7qy4/22/

你需要这样的东西，它使用setInterval并且还通过清除间隔来关心内存泄漏。

var i = 10, intId = setInterval(function () {
    if (i > 0) $('#timer').text(--i); else clearInterval(intId);
}, 1000);

演示

抱歉，但我找到了另一种解决方案：）我希望它能满足你。

var count = 10;
function run(){
    $('#timer').text(count--);
    if(count>=0) {
        setTimeout(run, 1000);
    }
}
run();

您可以使用递归函数来构建此函数：

这是工作jsFiddle。 

var timing = 11;
function timingRun() {
    if ( timing > 0 ) {
        timing--;
        $('#timer').text(timing);
        setTimeout(function() {
            timingRun();
        },1000);
    }else{
        // if you need a loop add these lines
        timing = 11;
        timingRun();
    }
}
timingRun();

当您需要在异步方法中使用同步处理的数据时，这是常见问题。在你引发循环的情况下 - 它的同步过程，它会增加i并运行代码，你将文本放在右括号。因此for增加i并在每次迭代中运行代码。在每次迭代你设置新的超时时，应该在一段时间内运行，它的异步。那么第一次setTimeout开始会发生什么？- 循环已经完成，i已经是 10，setTimeout使用它的回调。

要解决此任务，您必须使用闭包 - 在每次迭代中立即调用函数 witch，并将 i 作为参数，并在此函数中设置超时。在这种情况下，您传递的参数将存储在作用域中，并可用于超时回调：

var timerNode = $('#timer'),
    stepInSec = 1;
for (var i=10; i>=0; i--) (function(t) {
  window.setTimeout(function() {
    timerNode.text(t);
  }, (10-t)*stepInSec*1000)
}(i)) 

var breakPoint =60;
(function delay(bk){
    var counter=0;
    var handle = setInterval(function(){
    if( counter < bk){
        counter +=1;
        $('#timer').text(bk-counter);  
      }
 else{
        clearInterval(handle);
     }
 }, 1000);  
 }( breakPoint ) );
相关文章：