如何使用 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”会被“打印”为“0”。从第三个“if”语句到结尾，我正在格式化输出，以便该部分不那么重要，如果您愿意，可以忽略它。

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

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

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

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

我有几个问题：

• 在函数外创建区间会更好吗？
• “setInterval”是否可行？
• 是否可以停止具有我创建的功能的计时器？

如果您想更好地了解我正在制作的内容以及到目前为止我所做的事情，您可以在codepen 中查看我的所有代码。

Answer 1

一个好主意是跟踪定时器的剩余时间（直到到达 00:00），所以当你暂停定时器时你只需调用clearInterval，当你想恢复它时，只需再次调用@ 987654322@，但现在使用剩余时间作为输入。

为了解决保持对间隔的引用的问题，您可能希望从 setTimer 函数中返回它。 为了保持代码整洁，我建议您创建一个 Timer 类来管理计时器的所有“状态”并提供与之交互的方法（例如 pause()、stop()、resume()、@987654327 @)。