[英]How to make a setInterval() stop using clearInterval() work?
好吧,我正在嘗試使用setInterval()
來停止使用clearInterval()
,這是代碼:
let submitBPMkeeper = document.getElementById("submitBPMkeeper"); function startStopBPMkeeper(sr) { let bpmKeepTrack = document.getElementById("bpmSet"); var test1 = 0; var t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value); function bpmKTcounter() { test1 += 1; document.getElementById("testInput").innerHTML = test1; } if (sr == "start") { submitBPMkeeper.innerHTML = "Stop"; } else if (sr == "stop") { submitBPMkeeper.innerHTML = "Start"; clearInterval(t); } } submitBPMkeeper.addEventListener("click", function() { if (submitBPMkeeper.innerHTML == "Start") { startStopBPMkeeper("start"); } else if (submitBPMkeeper.innerHTML == "Stop") { startStopBPMkeeper("stop"); } });
<div id="bpm"> <h2>Tempo Keepper:</h2> <label for="bpmSet">BPM:</label> <input type="number" id="bpmSet" name="bpmSet" style="width:40px;" value="80"> <button id="submitBPMkeeper">Start</button> <p id="baseInput"></p> <p id="testInput"></p> </div>
正如你所看到的,你無法停止計數,我真的很希望當你按下停止鍵時它停止。
只需在上部范圍內定義區間變量即可。
const submitBPMkeeper = document.getElementById("submitBPMkeeper");
const bpmKeepTrack = document.getElementById("bpmSet");
let interval = null;
function toggleBPMKeeper() {
let test1 = 0;
function bpmKTcounter() {
test1 += 1;
document.getElementById("testInput").innerHTML = test1;
}
if (interval) {
clearInterval(interval);
interval = null;
submitBPMkeeper.innerHTML = "Start";
} else {
interval = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value)
submitBPMkeeper.innerHTML = "Stop";
}
}
submitBPMkeeper.onclick = toggleBPMKeeper;
感謝Teemu 的評論,我已經解決了我的問題:
let submitBPMkeeper = document.getElementById("submitBPMkeeper"); var t; function startStopBPMkeeper(sr) { let bpmKeepTrack = document.getElementById("bpmSet"); var test1 = 0; function bpmKTcounter() { test1 += 1; document.getElementById("testInput").innerHTML = test1; } if (sr == "start") { submitBPMkeeper.innerHTML = "Stop"; t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value); } else if (sr == "stop") { submitBPMkeeper.innerHTML = "Start"; clearInterval(t); } } submitBPMkeeper.addEventListener("click", function() { if (submitBPMkeeper.innerHTML == "Start") { startStopBPMkeeper("start"); } else if (submitBPMkeeper.innerHTML == "Stop") { startStopBPMkeeper("stop"); } });
<div id="bpm"> <h2>Tempo Keepper:</h2> <label for="bpmSet">BPM:</label> <input type="number" id="bpmSet" name="bpmSet" style="width:40px;" value="80"> <button id="submitBPMkeeper">Start</button> <p id="baseInput"></p> <p id="testInput"></p> </div>
通過在將按鈕文本設置為“停止”的同一個 if 塊中創建間隔,並將t
聲明拉到函數之外,我已經修復了它以使其正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.