为什么计时器无法正常工作？
[英]Why is the Timer not working as expected?
问题描述
[注意-脚本在JSfiddle中不起作用，但在chrome中可以正常工作]下面的脚本由一个3秒的计时器组成，该计时器在完成时会显示文本“ Time Up！”。这在第一次尝试时效果良好，但在下次尝试时，它将开始混合秒和文本“ Time Up！”。 （在几秒钟之间显示）。为什么会发生这种情况？
http://jsfiddle.net/starzar/86uqrtzs/32/
function timer() { var t = 3; console.log("timer started t = " + t); setInterval(function() { if (t >= 0) { document.getElementById("timer").innerHTML = t; console.log(t); t--; } else { document.getElementById("timer").innerHTML = "Time Up!"; } }, 1000); console.log("timer stopped t = " + t); }
<html> <head> <script src=timer.js></script> </head> <body> <input type=Reset onclick=timer()> <br> <hi id="timer"></hi> <br> </body> </html>
4 个解决方案
解决方案1
0 2019-01-17 09:42:41
因为您需要使用clearInterval()...清除它！
看下面的代码作为参考：
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval
var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function myStopFunction() { clearInterval(myVar); }
<!DOCTYPE html> <html> <body> <p>A script on this page starts this clock:</p> <p id="demo"></p> <button onclick="myStopFunction()">Stop time</button> </body> </html>
解决方案2
0 2019-01-17 09:45:32
如果不清除间隔，则间隔将永远持续下去。
您在第一个通话中启动的第一个间隔仍在后台运行。 在下面的示例中，您可以清楚地看到它。
您应该使用clearInterval()
function timer() { var t = 3; console.log("timer started t = " + t); setInterval(function() { if (t >= 0) { document.getElementById("timer").innerHTML = t; console.log(t); t--; } else { console.log("Time up"); document.getElementById("timer").innerHTML = "Time Up!"; } }, 1000); console.log("timer stopped t = " + t); }
<html> <head> <script src=timer.js></script> </head> <body> <input type=Reset onclick=timer()> <br> <hi id="timer"></hi> <br> </body> </html>
解决方案3
0 2019-01-17 10:08:28
每次单击“ 重置”按钮 ，都会创建一个新间隔。 这就是为什么当您再次单击“ 重置”按钮时 ，控制台输出会变得更加混乱。
setInterval函数返回创建的间隔的ID，您可以将其存储在诸如window.timerInterval之类的全局变量中。
在计时器函数内部，首先运行clearInterval（window.timerInterval） 。 因此，如果在window.timerInterval中创建并存储了任何间隔，则clearInterval（window.timerInterval）确保首先停止运行它。
检查并运行以下工作示例：
function timer() { var t = 3; console.log("timer started t = " + t); clearInterval(window.timerInterval); window.timerInterval = setInterval(function() { if (t >= 0) { document.getElementById("timer").innerHTML = t; console.log(t); t--; } else { document.getElementById("timer").innerHTML = "Time Up!"; } }, 1000); console.log("timer stopped t = " + t); }
<html> <head> <script src=timer.js></script> </head> <body> <input type=Reset onclick=timer()> <br> <hi id="timer"></hi> <br> </body> </html>
解决方案4
-1 2019-01-17 09:45:08
SetInterval以指定的间隔重复执行操作。
在您的情况下，您应该使用setTimeOut。
var timerConst;
function timer() {
if(timerConst) clearTimeOut( timerConst); // this will clear the previous timeout.
timerConst = setTimeOut(function() {
console.log("Time up");
document.getElementById("timer").innerHTML = "Time Up!";
}, 3000);}
3秒后将显示一个文本。
为什么.addClass（）和.removeClass（）无法按预期工作？
[英]Why is .addClass() and .removeClass() not working as expected?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.