计数器不显示每个数字，只显示最终总数答案

【问题标题】：Counter not displaying each number, just shows final total计数器不显示每个数字，只显示最终总数
【发布时间】：2022-01-10 00:30:22
【问题描述】：

为什么计数器只显示最终数字而不是逐个查看每个数字。需要做些什么来实现这一点？

var counter = 100;
function countdown() {

 while(counter < 1000) {
    
    counter++;
    console.log(counter);
    document.getElementById('cc').innerHTML = counter;

  }
}
    
countdown();
setInterval(countdown, 1000);

【问题讨论】：

这是因为浏览器会批量更新 DOM：你基本上是在让 while 循环尽可能快地运行以增加 counter。 setInterval 没有达到您的预期（我猜是每毫秒增加 1）。你能告诉我们你想要实现什么：在 1000 毫秒的时间内对值进行补间，还是每 1000 毫秒递增一次？
如果您想倒数或倒数，请向我们解释。也请看答案并与他们互动

标签： javascript html settimeout event-loop

【解决方案1】：

你没有给浏览器喘息的时间

还有为什么 setInterval 循环时会有循环？

你想倒计时。我猜不起来我们也想停止计数最后我们可以保存一个括号

let counter = 10; // 10 to show it works
let tId;
const cc = document.getElementById('cc');

function countdown() {
  if (counter === 0) { 
    cc.innerHTML = "DONE!";
    clearInterval(tId); // stop
    return
  }  
  //  console.log(counter);
  cc.innerHTML = counter;
  counter--;
}
countdown();
tId = setInterval(countdown, 1000);

&lt;span id="cc"&gt;&lt;/span&gt;

【讨论】：

【解决方案2】：

之所以会出现这个问题，是因为 Javascript 执行和页面渲染实际上发生在同一个执行线程中。这意味着在执行代码时，浏览器不会重绘页面，因为运行 JavaScript 会阻止 DOM 的更新，就像您的示例中一样。

要解决这个问题，您可以使用setTimeout()，它允许您指定将在设定的毫秒数后执行一次的函数。现在，在浏览器将有机会重绘页面的代码执行之间会有间隙。现在，当您实际传递 0 作为延迟参数时。它将安排回调在尽可能短的延迟之后异步运行 - 这将在 JavaScript 执行线程不忙之后发生（回调函数将在回调队列中等待由事件循环拉出以在之后处理很短的时间）

function count() {
   var counter = 100;
   var max = 1000;

   function timeoutLoop() {
      document.getElementById('cc').innerHTML = counter;
      if (++counter < max){
         setTimeout(timeoutLoop, 0);
      }
   }

   setTimeout(timeoutLoop, 0);
}

count();

<div id="cc">

</div>

关于浏览器渲染的好文章 - https://developpaper.com/the-process-of-browser-rendering-web-pages/

【讨论】：

@mplungjan 您的代码将在整个文档有效期间不断尝试更新cc 的.innerHTML。
"在最短的可能延迟之后" 这仅适用于前 4 次迭代，第 5 次将有 4 毫秒的最小延迟（实际上在 Chrome 中仍然有至少 1 毫秒的延迟，即使对于第一次迭代，而他们正在努力删除那个）。

【解决方案3】：

这是因为你使用了while循环，而是使用if语句来检查计数器是否达到1000。见下文：

var counter = 100;
function countdown() {

 if(counter < 1000) {
    counter++;
    console.log(counter);
    document.getElementById('cc').innerHTML = counter;
    

  }
}
    
countdown();
setInterval(countdown, 1000);

&lt;div id="cc"&gt;&lt;/div&gt;

【讨论】：

非常感谢兄弟。