javascript - While循环只返回最终结果

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 中的函数运行时它已经完成了很长时间。

这将每 500 毫秒触发一次函数（根据您的目的更改为 3000 毫秒），然后才会增加 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++);
}