一个页面上的多个计时器

Question

I've been given a task to display multiple timers on a page in a table. The start values for these timers are stored in a database and loaded into the view when the page loads.

I initially designed this as a single timer. In that version, using the clearInterval() method to stop the timer from counting down past 0:00 works. With the multiple timers, it does not.

There's no way for me to anticipate how many records are going to display in the table.

The single counter variable was how I implemented this when there was only one timer. That seems to still work to start the countdown process, but doesn't stop it as expected when the clearInterval(counter) is called.

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);
}

I would guess that the clearInterval() is not working because there are multiple timers on the page, but I'm not sure of the best way to load multiple variables and assign them to their own setInterval() function to then leverage when doing the clearInterval() later.

This is a separate JS file that is called by the HTML in the $(document).ready() function.

Any ideas on how to get this clearInterval() to work with multiple timers on a page?

Answer 1

Put the various intervals in an object, with a counter variable that increments every time you assign an interval. Then use the counter as the key and assign its value to the interval.