為什么計時器無法正常工作？
[英]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.