Question

Probably not the clearest title, but here goes – I need to display two independent countdowns on a page, accepting a user input for the starting value for each. When one reaches zero, the other starts and counts down to zero. Code for this is below, and working as expected.

I call the Timer1 function, which checks a variable for the starting value, if it exists, the count starts. When the count is zero, I clear the interval, reset the display to the starting value, and fire the second timer, if it has a value assigned:

    function Timer1() {
        var gDuration = goTime;
        countdown = setInterval(function () {
            if (gDuration >= 0) {
                $("#durationValue").html(ToTime(gDuration));
                gDuration--;
            }
            else {
                clearInterval(countdown);
                $("#durationValue").html(ToTime(goTime));
                if (restTime != 0) {
                    Timer2();
                }
            }
        }, 1000);
    }

    function Timer2() {
        var rDuration = restTime;
        countdown = setInterval(function () {
            if (rDuration >= 0) {
                $("#restValue").html(ToTime(rDuration));
                rDuration--;
            }
            else {
                clearInterval(countdown);
                $("#restValue").html(ToTime(restTime));
            }
        }, 1000);
    }

The next step is to allow that process to run for a set number of loops – I’ve tried wrapping setInterval in Timer1 in a for loop, which doesn’t work. Any ideas how to better go about this?

Answer 1

for-loops don’t work well with asynchronous stuff. Just make it a counter with an end condition as you have demonstrated with g/rDuration already.

With some callback abstractions, and heavy continuation-passing-style:

function timer(el, duration, interval, callback) {
    var countdown = setInterval(function() {
        if (duration-- >= 0) {
            el.text(ToTime(duration));
        } else {
            clearInterval(countdown);
            callback();
        }
    }, interval);
}

var goTime = …, restTime = …;
function t1(cb) {
    timer($("#durationValue"), goTime, 1000, cb);
}
function t2(cb) {
    timer($("#restValue"), restTimer, 1000, cb);
}
var loops = …;
(function loop(cb) {
    t1(function(){
        t2(function() {
            if (loop-- >= 0)
                loop(cb);
            else
                cb();
        });
    });
})(function() {
    alert("finished!");
});