Question

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

我最初将其设计为单个计时器。在该版本中，使用clearInterval（）方法停止计时器从0:00开始倒计时工作。使用多个计时器，它没有。

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

单个计数器变量是我在只有一个计时器时实现的方法。这似乎仍然可以启动倒计时过程，但是当调用clearInterval（计数器）时，并没有像预期的那样停止它。

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文件，由$（document）.ready（）函数中的HTML调用。

关于如何让这个clearInterval（）与页面上的多个计时器一起使用的任何想法？

Answer 1

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

页面上有多个计时器

1 个答案: