Javascript 通过按钮单击事件设置间隔和清除间隔

这是我的密码：

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时遇到问题。 两个按钮：

开始

和

停止

。当我单击启动计时器时，我希望函数

go

运行。那很好。我的问题是试图停止计时器

如果我把

设为x=setInterval（倒计时，1000）

在

stopIt（）

功能之外，它将自动启动

窗口上的计时器。onload

无论我是否单击

启动

按钮，但这样做时，我可以停止计时器

如果我把

设为x=setInterval（倒计时，1000）

在

stopIt（）

函数中，就像我在这里看到的一样，我可以随时通过单击

start

按钮启动计时器，但现在我无法使用

clearInterval（）

停止计时器

---

非常感谢您的帮助。提前谢谢

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

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);
}

---

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

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);
}

---

你能解释一下这背后的逻辑吗？我这样问是因为doing

var intervalID=setInterval（倒计时，1000）在
go
函数之外自动运行它。它是否像一个每次单击
start
或
stop
时都会替换它的标志？逻辑很简单。setInterval（）返回一个ID，该ID将用于标识该循环，因此，如果启动它，变量“intervalID”将被标记，因此，可以在函数外部使用该变量来停止stopIt（）函数中标记的间隔。如果您想控制go（）和stopIt（）函数是否正常工作，请将它们修改为在变量intervalID为null或非null时运行（或停止）。您能解释一下这背后的逻辑吗？我这样问是因为doing
var intervalID=setInterval（倒计时，1000）在
go
函数之外自动运行它。它是否像一个每次单击
start
或
stop
时都会替换它的标志？逻辑很简单。setInterval（）返回一个ID，该ID将用于标识该循环，因此，如果启动它，变量“intervalID”将被标记，因此，可以在函数外部使用该变量来停止stopIt（）函数中标记的间隔。如果要控制go（）和stopIt（）函数是否正常工作，请将它们修改为在变量intervalID是否为null时运行（或停止）。