Question

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

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

1秒钟值1，我希望它变成10然后9然后8等这是fiddle。我的错是什么？

Answer 1

使用setInterval实现此目的： -

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

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

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

Answer 2

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

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

DEMO

Answer 3

很抱歉，但我找到了另一个解决办法:)我希望它能满足你。

var count = 10;

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

Answer 4

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

Here is working 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();

Answer 5

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

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

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))

Answer 6

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 ) );

Jquery在循环中使用setTimeout

6 个答案: