时间戳

首页 > 解决方案 > 如何使用 eventListener 在 javaScript 中停止 setInterval 计时器？

javascript - 如何使用 eventListener 在 javaScript 中停止 setInterval 计时器？

问题描述

我正在尝试制作一个番茄计时器，就像这个页面上的番茄计时器一样

问题是我不知道我是否采取了最好的方法。

我创建了这个函数：

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 调用该函数。

我有一些问题：

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

标签： javascripttimersetinterval

解决方案

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

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

推荐阅读