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

【问题标题】：How to make a setInterval() stop using clearInterval() work?如何使用 clearInterval() 使 setInterval() 停止工作？
【发布时间】：2021-12-27 21:53:03
【问题描述】：

好吧，我正在尝试创建一个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>

如您所见，您无法停止计数，我真的希望它在您按下停止时停止。

【问题讨论】：

stackoverflow.com/questions/109086/…的可能重复
每次调用startStopBPMkeeper 时都会创建一个新间隔，因此初始调用中的引用t（这是您实际要清除的计时器）丢失。实际发生的是，在“停止”时您开始然后立即清除一个新的间隔 - 前一个无限期地继续进行。
在相同的 if 块中创建间隔，您将按钮文本设置为“停止”，并将 t 声明拉到函数之外。
不是一个答案，但如果您不依赖字符串比较，您会省去一些麻烦，在这种情况下，您的安全但“开始”==“开始”是一种让自己绊倒的简单方法.

标签： javascript setinterval clearinterval

【解决方案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;

【讨论】：

【解决方案2】：

感谢Teemu's 的评论，我已经解决了我的问题：

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 声明拉到函数之外，我已经修复它以便它工作。

【讨论】：