Local Clock Javascript Event Triggers

Question

I have a scenario where one client PC will control several LCD displays, each of which shows one browser window. These browser windows show different data that is in an animated loop using jquery.

I need to make sure that both browsers can be synchronized to rotate at the same time, otherwise they will be animated at different times.

So my question is: can I activate jquery to alternate content based on the local PC clock?

For example, every time the hours of seconds == 0, show version 1, every time the hours of seconds == 30, show version 2, etc.?

Answer 1

This (in my experience) is the most accurate way to get timers as close to the clock as possible:

// get current time in msecs to nearest 30 seconds var msecs = new Date().getTime() % 30000; // wait until the timeout setTimeout(callback, 30000 - msecs); 

Then, in the callback, once everything is done, repeat the same thing to trigger the next event.

Using setInterval causes other problems, including clock drift. The calculation based on the current time takes into account the execution time of the callback itself.

You will also need to use Date().getTime() to figure out which frame of your animation to show.

Everything will look something like this:

 function redraw() { var interval = 30000; // work out current frame number var now = new Date().getTime(); var frame = Math.floor(now / interval) % 2; // 0 or 1 // do your stuff here .. some time passes // retrigger now = new Date().getTime(); setTimeout(redraw, interval - (now % interval)); } redraw(); 

working demo http://jsfiddle.net/alnitak/JPu4R/

Answer 2

Answer: yes you can.

• Use Date.getTime() to track time
• Running js function every 30 seconds.

Answer 3

Why not launch one window from another - in this way the parent window will have full control over the start of the animation, because they are in ONE PROCESS. No need for hours.

Answer 4

You could do something like this. Thus, regardless of when you launched different browsers, their rotation will be synchronized.

 var t=setInterval("check()",1000); function check(){ var d = new Date(); if(d.getSeconds() == 0) { alert('do something'); } else if (d.getSeconds() == 30) { alert('do something else'); } }