如何使 setInterval() 停止使用 clearInterval() 工作？

Question

好吧，我正在尝试使用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>

正如你所看到的，你无法停止计数，我真的很希望当你按下停止键时它停止。

Answer 1

只需在上部范围内定义区间变量即可。

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;

Answer 2

感谢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声明拉到函数之外，我已经修复了它以使其正常工作。