如何使用 eventListener 停止 javaScript 中的 setInterval 计时器？

Question

我正在尝试制作一个番茄钟，就像本页上的那个一样TomatoTimer

问题是我不知道我是否采用了最佳方法。

我创建了这个函数：

function setTimer(minutes = "25") {
  let duration = minutes * 60 * 1000;
  let seconds = "00";
  let countdown = document.getElementById("timer");

  seconds = parseInt(seconds);
  minutes = parseInt(minutes);

  setInterval(() => {
    if (seconds === 0 && minutes > 0) {
      seconds = 60;
      minutes = minutes - 1;
      countdown.innerText = `${minutes}:${seconds}`;
    }
    if (seconds != 0) {
      seconds = seconds - 1;
    }

    if (seconds.toString().length === 1 && minutes.toString().length === 1) {
      countdown.innerText = `0${minutes}:0${seconds}`;
    } else if (minutes.toString().length === 1) {
      countdown.innerText = `0${minutes}:${seconds}`;
    } else if (seconds.toString().length === 1) {
      countdown.innerText = `${minutes}:0${seconds}`;
    } else {
      countdown.innerText = `${minutes}:${seconds}`;
    }

    duration = duration - 10000;
  }, 1000);
}

分钟和秒是字符串，因为我希望计时器具有这种格式 (01:05)，如果我使用数字，“00”是 "printed" 作为“0”。从第三条 "if" 语句到最后，我正在格式化输出，所以这部分不是那么重要，如果你愿意，你可以忽略它。

声明该函数后，我向按钮添加了一个事件侦听器以便调用它，到目前为止一切顺利。

问题是我对如何停止计时器一无所知。

我唯一想要的是停止执行该功能，我不希望应用程序记住当时的时间并从那里重新启动，我稍后再做。

我尝试了多种方法，其中之一是使用 clearInterval 方法，但我看到您必须将时间间隔存储在一个变量中，当我这样做时，我无法使用我的 eventListener 调用该函数.

我有几个问题：

在函数外部创建区间会更好吗？
"setInterval" 是正确的选择吗？
是否可以停止具有我创建的功能的计时器？

如果你想更好地了解我在做什么以及我到目前为止所做的事情，你可以在 codepen.

中查看我的所有代码

Answer 1

一个好主意是跟踪计时器的剩余时间（直到达到 00:00），因此当您暂停计时器时，您只需调用 clearInterval，当您想要恢复时它，只需再次调用 setInterval，但现在使用剩余时间作为输入。

为了解决保持对间隔的引用的问题，您可能需要从 setTimer 函数中 return 它。为了保持代码整洁，我建议您创建一个 Timer class 来管理计时器的所有 "state" 并提供与其交互的方法（如 pause()， stop()、resume()、reset()).

如何使用 eventListener 停止 javaScript 中的 setInterval 计时器？

How do I stop a setInterval timer in javaScript with an eventListener?

javascript

timer

setinterval