Continuing a cleared setIntervall instead of resetting it

Question

EDIT & UPDATE: for reference I rewrote the whole thing with only 1 timer and a second to time converter. Very clean and less complex. Here is the full code: http://pastebin.com/Hb6cBryL

I got this timer that I built out of javascript: http://powerpoint.azurewebsites.net/

It is quite simple code, but for the final implementation I would need to be able to pause the timer and restart it. I use 2 setIntervalls, 1 for the minutes that triggers every 60s and one for the seconds that triggers every second.

When I pause it I clear the intervals. However when I restart them the minutes restart at the 60 interval and aren't synced with the seconds anymore.

I probably implemented this in a horribly wrong way so I'd like to ask for your advice. 1 idea I had was to continue the inverval but avoid updating the variable and text on the page so that the minutes/seconds stay in sync< However this doesn't sound like an ideal solution to me. All tips are welcome :)

Js code:

    var minutes = null, seconds = null, cnt, secs;
function settimer(frm) { if (minutes == null) { cnt = frm.timeinput.value - '1'; secs = '59';} };

function stop() {
    clearInterval(minutes);
    clearInterval(seconds);
    minutes = null;
    seconds = null;
    document.getElementById("minutes").innerHTML = '00';
    document.getElementById("seconds").innerHTML = '00';
}

function pause() {
    clearInterval(minutes);
    clearInterval(seconds);
}

function runtimer() {
    event.preventDefault();
    if (minutes == null) {
        document.getElementById("minutes").innerHTML = cnt;};
        minutes = setInterval(function () {
            if (cnt == '0') { stop() } else { cnt -= 1; document.getElementById("minutes").innerHTML = cnt; };

        }, 6000);
        if (seconds == null) { document.getElementById("seconds").innerHTML = secs; };
        seconds = setInterval(function () {
            if (secs == '0') { secs = '59' } else { secs -= 1; document.getElementById("seconds").innerHTML = secs; };
        }, 100);
    }

Answer 1

You'll need to wrap them somehow, and recognise that you can't immediately get the timer's id.

function setIntervalWithOffset(fn, delay, offset) {
    var o = {id: null, o_id: null};
    o.o_id = window.setTimeout(function () {
        o.id = window.setInterval(fn, delay);
    }, offset);
    return o;
}

function setTimeoutWithOffset(fn, delay, offset) {
    var o = {id: null, o_id: null};
    o.o_id = window.setTimeout(function () {
        o.id = window.setTimeout(fn, delay);
    }, offset);
    return o;
}

To clear, use window.clearTimeout on obj.o_id and whichever type you set for obj.id.

---

You should also consider whether you'd be better off implementing a setTimeout loop rather than using setInterval so you don't have a chance of a cascade error

Answer 2

Sorry, I think that you are in a bad way. Why do you want to use two intervals to do the same thing? Intervals are asynchronous, you can not synchronize two intervals that runs independently.

You can achieve that with just one interval. To show seconds, you can just increment another variable each time that your counter reachs a threshold:

var counter = 0;
var seconds = 0;
var $interval = setInterval(function(){
    counter++;
    if (counter >= 6000) {
        counter = counter - 6000;
        seconds++;
    }
, 10);

So, it will be more easy to stop/restart your interval.

Answer 3

You need to get the handle to the timer, in order to be able to reset it later, you can do like below:

timeoutHandle = setTimeout(function(){/*code*/}, 1000);
clearTimeout(timeoutHandle);

Take a look at this jsfiddle

Taken from : How do I stop a window.setInterval in javascript?