javascript timer loop

Question

I want to create a timer that once it reaches a certain point, the timer resets, and then starts over.

Right now, I've got the loop set up, and as a test I want it to reset after 5000 ms (5 seconds). But the counter goes all haywire.

WIP Demo here: http://jsfiddle.net/stursby/wUHA3/

haha no, it's not an infinite loop. I'm updating the text of a span with the current timer value... so that's the only thing that gets messed up, you'll see. — stursby
– stursby, Commented Dec 29, 2011 at 1:58
You may like to look at the code from this question's accepted answer: stackoverflow.com/questions/8634415/… — nnnnnn
– nnnnnn, Commented Dec 29, 2011 at 2:02
not sure if IE supports it, but Date.now() is a bit cleaner than new Date().getTime() — Matt Greer
– Matt Greer, Commented Dec 29, 2011 at 2:03

Ken Browning · Accepted Answer · 2011-12-29 02:00:42Z

94

Instead of setTimeout, consider using setInterval. It will repeat automatically until you clear the interval.

setInterval(myMethod, 5000);

function myMethod( )
{
  //this will repeat every 5 seconds
  //you can reset counter here
}

edited Dec 29, 2011 at 2:00

Ken Browning

29.1k6 gold badges58 silver badges68 bronze badges

answered Dec 29, 2011 at 1:58

keyboardP

69.5k13 gold badges162 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chad Over a year ago

I agree, just to point out the reason he is having the issue described is because of the line var diff = (new Date().getTime() - start) - time; there is no need for that line. He should be doing window.setTimeout(instance, 100); instead of window.setTimeout(instance, (100 - diff));. And his issue is resolved.

keyboardP Over a year ago

You could post that as an answer because it's just as valid. OP can then decide if that method might suit their overall program. Whilst setInterval usually makes sense in a case like this, your code directly fixes the issue at hand.

Steven Over a year ago

For completeness, to set the interval: var timer = setInterval(function(){ doStuff() }, 1000); To subsequently clear the interval (and stop the timer): clearInterval(timer);

Chad · Accepted Answer · 2011-12-29 02:04:55Z

6

I agree with keyboardP that you should probably be using setInterval instead of setTimeout. However, to answer your original question the reason you are having issues with the timer is because of your repetition logic. Don't use:

var diff = (new Date().getTime() - start) - time;
window.setTimeout(instance, (100 - diff));

You don't need to try and account for execution time (which I assume is what you were trying to do with diff). Just assume it is negligible and use:

setTimeout(instance, 100);

And your issue is resolved, as you can see in this jsFiddle.

answered Dec 29, 2011 at 2:04

Chad

19.6k4 gold badges54 silver badges75 bronze badges

4 Comments

stursby Over a year ago

is there an easy way for this to increment by 1's instead of 100's? For example, 2.1 seconds is 2100, is there a way to get to more decimals like 2.154 seconds, or 2154 on the timer?

Chad Over a year ago

well the accuracy will not be exact to the millisecond. Browsers evaluate timeouts/intervals differently. As an average every 13ms a timeout is evaluated. SO that is about as specific as you can get, depending on the browser.

stursby Over a year ago

Okay, well I won't need to visually display the timer in ms, I just want the accuracy of 4 decimal places, because the timer is going to trigger other events that will need to synch up based on the timer and 2.4 seconds (2400 versus 2418) makes a difference. here's a WIP demo jsfiddle.net/stursby/zFYUT/5 I still need to add looping, but that's essential what I'm trying to do (in the end, it won't be visual though)

Chad Over a year ago

Like I said, timeouts and intervals are evaluated differently in each browser. Usually around every 14ms they are evaluated. Meaning, if you do a delay of 1ms, it may actually take anywhere from 1 to 15. so your timer will not be accurate to a millisecond. Probably not even to 10ms, but it would be pretty close in orders of 100ms. Best you can do is if you have to trigger an event at 2418, you trigger it once the time ellapsed has exceeded 2418; thats about the best you can do.

Collectives™ on Stack Overflow

javascript timer loop

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related