setInterval 和 clearInterval 通过按钮点击事件 [英] setInterval and clearInterval through button click events

问题描述

这是我的代码:

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 运行.这一切都很好.我的问题是试图停止计时器.

I am having trouble trying to set up setInterval and clearInterval. 2 buttons: start and stop. I want the function go to run when I click start to start the timer. That is all good. My problem is trying to stop the timer.

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

If I put let x = setInterval(countDown, 1000); outside the stopIt() function, it will automatically start the timer on windows.onload regardless of whether or not I click the start button but, in doing so, I can stop the timer.

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

If I put let x = setInterval(countDown, 1000); inside the stopIt() function like what I have here, I can start the timer whenever I want by clicking the start button, but now I can't stop the timer using clearInterval().

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

Any help is greatly appreciated. Thanks in advance!

推荐答案

尝试在go"函数中的一个变量中设置区间的ID，在stopIt"函数内部要取消，像这样:

Try to set the ID of the interval in the "go" function in a variable outside to be canceled inside the "stopIt" function, like this:

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

这篇关于setInterval 和 clearInterval 通过按钮点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！