setInterval and clearInterval through button click events

问题

Here is my code:

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

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.

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.

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!

回答1:

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

来源：https://stackoverflow.com/questions/42543966/setinterval-and-clearinterval-through-button-click-events

标签

javascript

timer