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

Your code doesn't run here (Mozilla FF 28.0). Anyway, I think you shouldn't set a `Interval` for the `minutes`; try calculating the `minutes` from the `seconds`. — Gui Imamura, Apr 07 '14 at 15:03
that might indeed be a better approach, thanks for the suggestions. Have not tried all browsers yet. — cmplieger, Apr 07 '14 at 15:04

score 1 · Accepted Answer · answered Apr 07 '14 at 14:59

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

answered Apr 07 '14 at 14:59

Paul S.

64,864
9
122
138

wow nice. will try to use this with the seconds as an indicator of the offset – cmplieger Apr 07 '14 at 15:00
You could also try to have it so you only use a single timer, since minutes should change at the same time as seconds go `59 -> 0` – Paul S. Apr 07 '14 at 15:04
...idk why for the timeout version I didn't think to just do `delay + offset`. Also, if you want to start using these for a lot of projects you may wish to re-write them so you can map unknown numbers of args so it neatly matches up with the spec for the regular versions. – Paul S. Apr 07 '14 at 15:17

score 1 · Answer 2 · answered Apr 07 '14 at 15:23

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.

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

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?

edited May 23 '17 at 11:57

Community

1
1

answered Apr 07 '14 at 14:57

Mehdi Karamosly

5,388
2
32
50

I don't quite get it, are you suggesting I replace the intervalls by timeouts? How would I use a timeout to update info on my page every X seconds? – cmplieger Apr 07 '14 at 14:58

Continuing a cleared setIntervall instead of resetting it

3 Answers3