如何解决clearInterval()无法停止setInterval()定时器的问题

根因分析 #

• 存储定时器ID的变量t是函数startStopBPMkeeper的内部局部变量，每次调用这个函数都会生成全新的t变量。点击停止按钮调用函数时，本次生成的t和之前启动定时器时生成的t是完全独立的两个变量，clearInterval操作的是空白的新变量，无法定位到正在运行的定时器，所以计数不会停止。
• 计数器test1也定义在函数内部，每次重启定时器都会被重置为0，不符合常规使用逻辑。

修复后的代码 #

JavaScript代码 #

let submitBPMkeeper = document.getElementById("submitBPMkeeper");
// 将定时器ID和计数器提到全局作用域，保证启停操作指向同一个实例
let t = null;
let test1 = 0;

function startStopBPMkeeper(sr) {
  let bpmKeepTrack = document.getElementById("bpmSet");
  if (sr == "start") {
    // 启动前先清除可能存在的旧定时器，避免多次点击启动生成多个并行定时器
    if(t) clearInterval(t);
    test1 = 0;
    t = setInterval(bpmKTcounter, 60000 / bpmKeepTrack.value);
    submitBPMkeeper.innerHTML = "Stop";
  } else if (sr == "stop") {
    submitBPMkeeper.innerHTML = "Start";
    clearInterval(t);
    // 停止后重置t为null，方便后续判断定时器状态
    t = null;
  }

  function bpmKTcounter() {
    test1 += 1;
    document.getElementById("testInput").innerHTML = test1;
  }
}

submitBPMkeeper.addEventListener("click", function() {
  if (submitBPMkeeper.innerHTML == "Start") {
    startStopBPMkeeper("start");
  } else if (submitBPMkeeper.innerHTML == "Stop") {
    startStopBPMkeeper("stop");
  }
});

HTML代码（无需修改） #

<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>

内容的提问来源于stack exchange，提问作者Officer Erik 1K-88