Javascript计时器/计数器崩溃浏览器答案

【问题标题】：Javascript timer/counter crashing browserJavascript计时器/计数器崩溃浏览器
【发布时间】：2021-12-31 01:21:26
【问题描述】：

此代码用于在您在文本输入中键入内容时启动一个计时器，该计时器每秒计数一次，直到达到 5 秒，然后停止。但它不断吐出0，这正在创建一个无穷无尽的while loop，导致浏览器崩溃。我确定我在这里遗漏了一些明显的东西：-/

var secondsPassed = 0;

function setTimer() {
  
  while (secondsPassed <= 5) {
    console.log(secondsPassed);
    setInterval(function() { secondsPassed += 1; }, 1000);
  }
}

&lt;input type="text" onkeyup="setTimer()"&gt;

【问题讨论】：

setInterval 不会阻止。所以你正在创建数百万个计时器
考虑使用带有sleep的async-await
@DanielA.White sleep()?
不是浏览器崩溃，只是陷入死循环。
我想使用 setTimeout 来更新您的代码，而不是 jsfiddle.net/n4jhrs95

标签： javascript setinterval

【解决方案1】：

您的 while 循环永远不会停止，因为它的条件 (secondsPassed <= 5) 永远不会计算为真，因为 setInterval 不是同步的。

您应该将条件移动到 setInterval 内。

var secondsPassed = 0;

function setTimer() {
  var interval = setInterval(function() {
    if (++secondsPassed == 5) clearInterval(interval);
    console.log(secondsPassed)
  }, 1000);
}

&lt;input type="text" onkeyup="setTimer()"&gt;

【讨论】：

【解决方案2】：

设置间隔和计数时间的方法都是错误的。

我推荐以下内容：

var secondsPassed = 0, timerOn = false;
function setTimer(){
   if(timerOn) return;
   var t0 = Date.now();
   timerOn = true;
   var intervalId = setInterval(
       function(){ 
          secondsPassed = Math.round((Date.now()-t0)/1000);
          console.log(secondsPassed)
          if(secondsPassed >= 10){
              clearInterval(intervalId);
              timerOn = false;
          }
       }, 1000
   );
}

&lt;input type="text" onkeyup="setTimer()"&gt;

我在 10 秒后停止了计时器，以防有人想测试它，但当然，否则你必须停止它。

【讨论】：