页面上有多个计时器答案

【问题标题】：Multiple timers on a page页面上有多个计时器
【发布时间】：2018-06-14 16:02:05
【问题描述】：

我的任务是在表格的一个页面上显示多个计时器。这些计时器的起始值存储在数据库中，并在页面加载时加载到视图中。

我最初将其设计为单个计时器。在那个版本中，使用 clearInterval() 方法来阻止计时器从 0:00 开始倒计时。使用多个计时器，它不会。

我无法预测表格中将显示多少条记录。

单个计数器变量是我在只有一个计时器时实现这一点的方式。这似乎仍然可以启动倒计时过程，但在调用 clearInterval(counter) 时并没有按预期停止。

var counter;

// NOTE: Does not support days at this time
// Ex: StartTimer(5, 'm', 'timer') for Five Minutes
// Ex: StartTimer(5, 'h', 'timer') for Five Hours
function StartCountdownTimer(timeDistance, timeMeasurement, timerCallback) {

// Add timeDistance in specified measurement to current time
var countDownDate = moment().add(timeDistance, timeMeasurement).toDate();
var timeRemaining;

counter = setInterval(function () {

    // Get Current Time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    let duration = moment.duration(distance * 1000, "milliseconds");

    let hours = duration.hours();
    let minutes = duration.minutes();
    let seconds = duration.seconds();

    if (minutes < 10 && hours && hours > 0) {
        minutes = "0" + minutes;
    }

    if (seconds < 10) {
        seconds = "0" + seconds;
    }

    // If the count down is finished clear the counter interval.
    if (distance < 0) {
        clearInterval(counter);
    }
    else {
        timerCallback(hours, minutes, seconds);
    }
    }, 1000);
}

我猜想 clearInterval() 不起作用，因为页面上有多个计时器，但我不确定加载多个变量并将它们分配给它们自己的 setInterval() 函数然后利用的最佳方法稍后执行 clearInterval() 时。

这是一个单独的 JS 文件，由 HTML 在 $(document).ready() 函数中调用。

关于如何让 clearInterval() 与页面上的多个计时器一起工作的任何想法？

【问题讨论】：

如果你用特定变量定义了所有setInterval，那么你可以一个一个地清除它们。
Alex，如果我不知道会有多少条记录，我该如何创建具有唯一变量的 setInterval？
你的问题是你有var counter 是假定来保存所有的间隔。 Javascript 是Single-Threaded，这意味着您不能为每个变量设置多个间隔。
我正在努力解决这个问题:)
你可以创建一个定时器数组。 var intervals = []; intervals["customID"] = setInterval(function() {...}, 1000);

标签： javascript setinterval clearinterval

【解决方案1】：

将各种间隔放入对象中，每次分配间隔时计数器变量都会增加。然后使用计数器作为键并将其值分配给间隔。

【讨论】：