Javascript计时器/计数器使浏览器崩溃

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(永远不会计算为true，因为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秒后停止了计时器，以防有人想测试它，但当然，否则你必须停止它。