Javascript: Start/Stop/Pause Button for setInterval()

tom.slick · Jan 28, 2013

You can not pause setInterval() but you can stop it with clearInterval() and then restart it

Zen00 · Jan 28, 2013

Can I instead of pausing setInterval() change the interval variable to a unreasonably long time period which emulates a pause?

tom.slick · Jan 29, 2013

Use window.setTimeout instead.

Code:

Code:

var delay = 1000;
function Timer() {
    // do whatever

    window.setTimeout(Timer, delay);
}

window.setTimeout(Timer, delay);

You can manipulate delay in the body of your function.

Or if you just want a button that just makes it look like it is pausing thing, but does not really pause anything. the below code will simulate
a pause button. It will stop the counter and then resume counting where it left off, (it simulates a pause).
The stop button will stop and reset the counter.
The restart button will reset the counter and restart it.

Code:

Code:

<!DOCTYPE html>

A counter that you can Start/Stop/Pause

ReStart
Stop
pause

Zen00 · Jan 31, 2013

Thanks for the help, as it turns out I didn't need a pseudo pause button at all since I was storing the calculated values in variables and HTML text so when I cleared the interval it didn't affect the timer after all.

With that my first webapp is done. Does anyone have some web hosting where I can showcase it to you from?

tom.slick · Jan 31, 2013

heliohost is good for a free host.
http://www.heliohost.org/home/features

Zen00 · Feb 1, 2013

Thanks, I found another site to put it on as well.

http://zenproductions.co.nf/

Though the bandwidth is low, but whatever, I don't expect many people to actually bother.

Zen00 · Feb 1, 2013

I added millisecond support, however instead of incrementing every second now, it increments every 5 seconds, even with the interval period set to 1. In order to get the timer correctish I have to increment every 200 intervals rather than 1000. Is there a way I can get this more accurate?

Zen00 · Feb 1, 2013

After doing some reading I found that most browsers don't like lots of calls of setInterval() so instead of calling it every millisecond I'm calling it every 10 now. This reduces the accuracy of the timer from .001 to .01, but not enough that most of you will know or care.

Zen00 · Feb 1, 2013

Now that the code is finished, please feel free to peruse and validate it if you wish. Thanks for any bug reports I get!

Code:

Code:

<!DOCTYPE HTML>

                Simple Timer

                        00:00:00

tom.slick · Feb 2, 2013

The way we are doing it now is not the best way to do this. It does not keep proper time. I found an article that explains why http://www.sitepoint.com/creating-accurate-timers-in-javascript/
The author is right, I added a clock to your example page and it quickly went out of sync. So I rewrote my example and it seems to be a lot more accurate.

Code:

Code:

timer 00:00:00.0

Reset/Start
  Stop  
pause

Zen00 · Feb 19, 2013

Hey Tom, thanks for posting the article, I read through it and your example code a few times and have started making appropriate changes.

In the mean time, how does this line of code work?

Code:

Code:

d.setHours((d.getHours()-h1),(d.getMinutes()-m1),(d.getSeconds()-s1),(d.getMilliseconds()-mil1));

I couldn't find anything about it in W3Schools, so how does it work better than say...

Code:

Code:

d.setHours(d.getHours()-h1);
d.setMinutes(d.getMinutes()-m1);
etc.

tom.slick · Feb 20, 2013

Quote:

Code:
Originally Posted by Zen00

Hey Tom, thanks for posting the article, I read through it and your example code a few times and have started making appropriate changes.

In the mean time, how does this line of code work?

Code:

Code:

d.setHours((d.getHours()-h1),(d.getMinutes()-m1),(d.getSeconds()-s1),(d.getMilliseconds()-mil1));

I couldn't find anything about it in W3Schools, so how does it work better than say...

Code:

Code:

d.setHours(d.getHours()-h1); d.setMinutes(d.getMinutes()-m1); etc.

It's the same just all in one command

Code:

Code:

Date.setHours(hour,min,sec,millisec)

Zen00 · Feb 20, 2013

Thanks for the help, here's the new code. By the way, why do you use "window." in front of everything? Can't find a good explanation and would like one if it would help me write better.

Anyways, this should be the final version now. You can also see it in action on zenproductions.co.nf

Code:

Code:

<!DOCTYPE HTML>

                Simple Timer

                        00:00:00

tonychjr · Aug 29, 2013

How to automatically pause the timer when the mobile browser is in background and resume the timer when we use it without any buttons...for example like a mobile game timer ... i got my code in which my timer starts only when i click any image on the screen. timer is running fine only when it is in use but when its in background and resumed its going below 0 i.e., -1,-2,-3...

tonychjr · Sep 1, 2013

Quote:

Code:
Originally Posted by tom.slick

The way we are doing it now is not the best way to do this. It does not keep proper time. I found an article that explains why http://www.sitepoint.com/creating-accurate-timers-in-javascript/
The author is right, I added a clock to your example page and it quickly went out of sync. So I rewrote my example and it seems to be a lot more accurate.

Code:

Code:

timer 00:00:00.0 Reset/Start Stop pause

how to use timer without buttons in the above code...like for example if we only open the page then timer starts and pauses when its not in use...

Zen00 · Sep 1, 2013

Think this might be what you're looking for.

http://stackoverflow.com/questions/4651193/event-when-a-web-page-gets-focused

Javascript: Start/Stop/Pause Button for setInterval()

Top Contributors this Month