虽然循环只返回最终结果

While loop only returning final result

本文关键字：结果 返回 循环      更新时间：2023-09-26
while (counterInc < counter) {
  window.setTimeout(function () {
    $('#results').text(counterInc);
    }, 3000);
  counterInc++;
}

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

试试这个

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 毫秒(，然后它才会增加计数器。 添加它会在达到计数器最大值时清除间隔。

问题是 setTimeout(( 充当"独立线程"。您设置它，它会在指定的时间量后执行一次。与此同时，"主线程"继续运行：因此您的计数器将在此期间增加。

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

因此，在声明 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++;
}​

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