setInterval 和 clearInterval 通过按钮点击事件

Question

这是我的代码：

window.onload = runThis;
function runThis() {

  const txtMin = document.getElementsByClassName("min");
  const txtSec = document.getElementsByClassName("sec");

  function go() {
    setInterval(countDown, 1000);
  }

  function countDown() {
    timeNow = timeNow - 1;
    timeSec = timeNow % 60; //remainder as seconds
    timeMin = Math.round((timeNow/60) - (timeSec/60)); //minutes

    txtMin[0].innerText =
      (timeMin > 0 ? 
        (timeMin >= 10 ? `${timeMin}:` : `0${timeMin}:`)
      : "00:");

    txtSec[0].innerText =
      (timeSec > 0 ? 
        (timeSec >= 10 ? timeSec : `0${timeSec}`)
      : "00");
  }

  function stopIt() {
    let x = setInterval(countDown, 1000);
    clearInterval(x);
  }

  const btnStart = document.getElementsByClassName("start");
  btnStart[0].addEventListener("click", go);

  const btnStop = document.getElementsByClassName("stop");
  btnStop[0].addEventListener("click", stopIt);
}

我在尝试设置 setInterval 和 clearInterval 时遇到问题。 2 个按钮：start 和 stop。当我单击start 启动计时器时，我希望函数go 运行。这都很好。我的问题是试图停止计时器。

如果我将let x = setInterval(countDown, 1000); 放在stopIt() 函数之外，无论我是否单击start 按钮，它都会自动在windows.onload 上启动计时器，但这样做，我可以停止计时器。

如果我将let x = setInterval(countDown, 1000); 放入stopIt() 函数中，就像我在这里所拥有的那样，我可以随时通过单击start 按钮启动计时器，但现在我无法使用clearInterval() 停止计时器.

非常感谢任何帮助。提前致谢！

Answer 1

尝试在“go”函数中的一个变量中设置间隔的ID，在“stopIt”函数内部取消，如下所示：

window.onload = runThis;
function runThis() {
  var intervalID = null;
  const txtMin = document.getElementsByClassName("min");
  const txtSec = document.getElementsByClassName("sec");

  function go() {
    intervalID = setInterval(countDown, 1000);
  }

  function countDown() {
    timeNow = timeNow - 1;
    timeSec = timeNow % 60; //remainder as seconds
    timeMin = Math.round((timeNow/60) - (timeSec/60)); //minutes

    txtMin[0].innerText =
      (timeMin > 0 ? 
        (timeMin >= 10 ? `${timeMin}:` : `0${timeMin}:`)
      : "00:");

    txtSec[0].innerText =
      (timeSec > 0 ? 
        (timeSec >= 10 ? timeSec : `0${timeSec}`)
      : "00");
  }

  function stopIt() {
    clearInterval(intervalID);
  }

  const btnStart = document.getElementsByClassName("start");
  btnStart[0].addEventListener("click", go);

  const btnStop = document.getElementsByClassName("stop");
  btnStop[0].addEventListener("click", stopIt);
}