使用 Javascript 创建一个可以启动和停止的倒数计时器答案

【问题标题】：Creating a countdown timer with Javascript that can be started and stopped使用 Javascript 创建一个可以启动和停止的倒数计时器
【发布时间】：2023-03-04 21:45:01
【问题描述】：

我正在寻求有关在对话框中创建倒数计时器方面的帮助。

逻辑如下： 1 - 有一个数据表，其中一行是可点击的（完成） 2 - 这将打开一个对话框，显示有关该项目的更多信息（完成） 3 - 这个项目有一个过期日期，我想显示一个倒计时（尝试）

我能够创建一个倒数计时器并显示它正在倒数。但是，当我关闭对话框并单击另一个项目时，倒计时计时器与之前创建的倒计时发生冲突。

创建倒计时的函数如下：

var countFunction = function countDownTimer(timeToCount) {
        var countDownDateTime = new Date(timeToCount).getTime();
        var now = new Date().getTime();
        var remaining = "Timer has expired.";

        var timeLeft = countDownDateTime - now;

        if (timeLeft > 0) {
            const parts = {
                days: Math.floor(timeLeft / (1000 * 60 * 60 * 24)),
                hours: Math.floor((timeLeft / (1000 * 60 * 60)) % 24),
                minutes: Math.floor((timeLeft / 1000 / 60) % 60),
                seconds: Math.floor((timeLeft / 1000) % 60),
            };
            remaining = Object.keys(parts).map(part => {
                return `${parts[part]} ${part}`;
            }).join(" ");
            $('#P_CountDownTimer').text(remaining);
        }
        
    }

要调用该函数，在打开对话框的脚本中，我使用以下内容：

countDownTimer(cancellationDateTime);
setInterval(countDownTimer(cancellationDateTime), 1000);

谁能指导我在关闭对话框时如何“销毁”计时器？

【问题讨论】：

标签： javascript jquery countdown

【解决方案1】：

也许您只需要再添加一个条件以防止在对话框关闭时剩余时间输出？

if (dialogIsOpened && timeLeft > 0) {
  // ...
}

【讨论】：