javascriptsettimeoutcountdowntimerarray-reduce

How to run multiple timers one after another with pause in javacript?


I need to run multiple timer one after another with pause. Input for timer comes from the array which contains set of times. I did something with reduce method. But could not break early the reduce method.

const times = [5, 4, 5];
function countDown(secs) {
        console.log(secs);
        if (secs === 1) {
            clearTimeout(timer);
            return timer;
        }
        secs--;
        var timer = setTimeout(() => countDown(secs), 1000);
}

times.reduce((totalDelay, time) => {
    setTimeout(() => {
        countDown(delay);
    }, 1000 * totalDelay);
    const delay = parseInt(time);
    totalDelay += delay;
    return totalDelay;
}, 0);

I tried with a boolean to pause and play. The timer is paused by that boolean variable but when I resume two timer is running because of the reduce.

Is there any other way to do this with loop or something?


Solution

  • You code looks way too complicated. All you have to do is setting the timeout inside a function (without arguments) and use that function as a callback to setTimeout.

    const times = [5, 4, 5];
    function countDown() {
        const secs = times.shift();
        if (typeof secs === 'number') {
            setTimeout(countDown, secs * 1000);
            console.log(`Next timer in ${secs} seconds`);
        } else {
            console.log('Done');
        }
    }
    countDown();

    Here I'm removing an element from the start of the times array on each iteration. You could also leave the array unchanged and use an index to keep track of the progress.