Generally, the code seems to run fine - after x
seconds, the counter counts x
less. The setInterval()
function in your code
setInterval(moveStep(digits.length - 1), 1000);
calls moveStep()
every 1000 miliseconds, i.e. every second. However, you cannot expect your computer, your operating system and your browser to be totally precise with miliseconds. Sometimes the event triggers sooner and sometimes it triggers later (especially if you are also running other programs that may interfere or slow down your code). So it just may happen that instead of
counter=2 - 1 second delay - counter=1 - 1 second delay - counter=0
you get
counter=2 - 2 second delay - counter=1 - counter=0
or something like that. In this case, you wouldn't see the counter=1
, because it gets immediately redrawn when the next event triggers and counter
is set to 0
.
One thing you can do is to use setTimeout
instead of setInterval
, so you get
var callback = function() {
moveStep(digits.length - 1);
setTimeOut(callback, 1000);
}
setTimeOut(callback, 1000);
In this case, the timed events won't line up in a queue and then trigger at once, like they did in the previous case. This is because you don't set the interval, but just a timeout - the next event is scheduled to occur 1 second after the current event has finished. This way, the time between two events will always be (approximately) 1 second.
However, the problem here is with the world approximately. In the first case, setInterval()
schedules the events to occur 1 second, 2 seconds, 3 seconds etc. from now, so after x
seconds, your counter should be decreased by x
, although it sometimes doesn't redraw at every step. However, in the second case, when using setTimeout
, the little deviations from 1000 miliseconds may slowly build up, so your counter will get decremented by x*1.1
after x
seconds, or something like that. In other words, you can't guarantee it to be on time.
To sum it up, you're facing a common problem with setInterval
and I don't think there is much to do about it.