Question

while (counterInc < counter) {
  window.setTimeout(function () {
    $('#results').text(counterInc);
    }, 3000);
  counterInc++;
}

此代码应每隔3000毫秒递增带有ID结果的标记，而不是while循环正在运行并返回最终结果。例如，不是将文本更改为1,2,3,4,5，... n，而是将文本更改为n。如何让循环每1000毫秒更新一次文本字段而不是只有最终结果？

Answer 1

试试这个

var counterInc = 0;
var counterMax = 10;

var timeoutId = window.setInterval(function() {
    $('#results').text(counterInc++);
    if (counterInc >= counterMax) {
        window.clearInterval(timeoutId);
    }
}, 500);

http://jsfiddle.net/GufCs/4/

发生的事情是你每三秒更新一次单元格，但是，你的循环可以在3秒内完成一个数字的荒谬数字，所以它在setTimeout中的函数运行时已经很久了。

这将每500ms触发一次该功能（为了您的目的而改为3000ms），然后才会增加counterInc。添加它会在到达counterMax时清除Interval。

Answer 2

问题是setTimeout（）充当“独立线程”。您设置它并在指定的时间后执行一次。同时“主线程”继续运行：所以你的计数器会在此期间增加。

Answer 3

要了解问题，您需要了解闭包是什么。在这里，您希望每次都传递某个值，而不是在循环范围结束时计算的值。

因此，在您声明setTimout时计算值，而不是在调用时计算您可以执行以下操作的值：http://jsfiddle.net/lechevalierd3on/jhYm3/

var counter = 10;
var counterInc= 0;

while (counterInc < counter) {
  window.setTimeout(function () {
      var inc = counterInc;
      return function(){
          $('#results').text(inc);
      }
  }(counterInc), 1000 * counterInc);   

  counterInc++;
}

Answer 4

while (counterInc < counter) {
  window.setTimeout(function () {
    $('#results').text(counterInc);
    }, 3000 * counterInc++);
}

while循环只返回最终结果

4 个答案: