Javascript timer/counter 浏览器崩溃

Question

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

var secondsPassed = 0;

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

<input type="text" onkeyup="setTimer()">

Answer 1

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

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

var secondsPassed = 0;

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

<input type="text" onkeyup="setTimer()">

Answer 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
   );
}

<input type="text" onkeyup="setTimer()">

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

Javascript timer/counter 浏览器崩溃

Javascript timer/counter crashing browser

javascript

setinterval