javascript Flip clock help

[vaene]

I have coded up a flip clock from scratch. About halfway through I stumbled up on Eric Garside's excellent clock at
http://eric.garside.name/demo/epiclock.html#ec-flip
but I wanted a higher frame rate and didn't want to write so much css to achieve it so I muddled on in my own way.

Here are the results:

http://dev.designrh.com/clock/flipclock.php

there are some strange problems though. I've had to throw in a correction every 10 secs or else the clock goes berserk if I leave it running too long. The correction is on lines 258-262 of clock.js. I thought there might be too much code to paste here but you are welcome to view the source at the link above.

The basic idea is that I initialize the time with :
initFlipTime();

Which gets the current time with

var curdate = new Date();
var seconds = curdate.getSeconds();

so on and so forth for the mins and hours

I then set up an interval:
flipInt = setInterval('updateFlipTime()', 1000);

which checks to see if the time has changed and then runs the moveInteger() function as such:
moveInteger('clock_10thsecond_holder', 30);

Which sets off another setInterval to control animation of the clock by moving the background image up a frames height at a time, -88 px, using setStyle() from the prototype class. The other functions control when the other parts of the clock flip when say seconds get to 10 or something.

I am using a lot of setIntervals here and I wonder if that is why it is so buggy. I do like the look and control of frame rate though so I would welcome suggestions on how to improve my chewing gum and bailing wire effort!

Feel free to use and improve on anything you find interesting, and thanks in advance for any help.

[r51]

In browsers, JavaScript is single-threaded. You can't have multiple scripts / functions running in parallel (although look into web workers for some progress here).

setInterval will try to run code at the specified interval. If other code is running it will queue. If a particular interval timer is already queued, when that timer fires again it will not be added to the queue again.

For your clock, the intervals will end up blocking each other as different ones try to fire while code is being executed. You probably have updateFlipTime() overlapping with moveInteger();

You could try altering the frame rate and number of frames for each flip depending on how much time is left before that digit should next flip.

[vaene]

Ahh Bach. Ok well I thought the setIntervals might be the problem. I guess I have some architecture work to do. Or I might just heave it and do it all in flash. Thanks for the help!