Javascript: Start/Stop/Pause Button for setInterval()
1 - 17 of 17 Posts
Joined
·
1,012 Posts
Use window.setTimeout instead.
Code:
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:
Code:
var delay = 1000;
function Timer() {
// do whatever
window.setTimeout(Timer, delay);
}
window.setTimeout(Timer, delay);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
pauseThanks 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?
With that my first webapp is done. Does anyone have some web hosting where I can showcase it to you from?
Joined
·
1,012 Posts
heliohost is good for a free host.
http://www.heliohost.org/home/features
http://www.heliohost.org/home/features
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.
http://zenproductions.co.nf/
Though the bandwidth is low, but whatever, I don't expect many people to actually bother.
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?
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.
Joined
·
1,012 Posts
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:
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
pauseHey 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:
I couldn't find anything about it in W3Schools, so how does it work better than say...
Code:
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));Code:
Code:
d.setHours(d.getHours()-h1);
d.setMinutes(d.getMinutes()-m1);
etc.
Joined
·
1,012 Posts
Quote:
Code:
It's the same just all in one commandOriginally 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:
I couldn't find anything about it in W3Schools, so how does it work better than say...Code:d.setHours((d.getHours()-h1),(d.getMinutes()-m1),(d.getSeconds()-s1),(d.getMilliseconds()-mil1));
Code:
Code:d.setHours(d.getHours()-h1); d.setMinutes(d.getMinutes()-m1); etc.
Code:
Code:
Date.setHours(hour,min,sec,millisec)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:
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:00How 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...
Quote:
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...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
Think this might be what you're looking for.
http://stackoverflow.com/questions/4651193/event-when-a-web-page-gets-focused
http://stackoverflow.com/questions/4651193/event-when-a-web-page-gets-focused
1 - 17 of 17 Posts
Join the discussion
Join now to ask and comment!