I have a scenario where one client PC will be driving multiple LCD displays, each showing a single browser window. These browser windows show different data which is on an animated cycle, using jquery.

I need to ensure that both browsers can be synched to rotate at exactly the same time, otherwise they'll animate at different times.

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

eg each time the clock seconds == 0, show version 1, each time clock seconds == 30, show version 2 etc?

I have a scenario where one client PC will be driving multiple LCD displays, each showing a single browser window. These browser windows show different data which is on an animated cycle, using jquery.

I need to ensure that both browsers can be synched to rotate at exactly the same time, otherwise they'll animate at different times.

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

eg each time the clock seconds == 0, show version 1, each time clock seconds == 30, show version 2 etc?

• javascript
• jquery

• if (getSeconds() == 0) { } else if (getSeconds() == 30) { } – Devin Burke Commented Jan 9, 2012 at 21:20
• That doesn't put them in sync. I need an event to trigger precisely when the seconds turn 30 or 0 – hud Commented Jan 9, 2012 at 21:44
• @hud, I was mostly just informing you about the getSeconds() method, which is a method of a Date object, by the way. You don't actually want to poll. – Devin Burke Commented Jan 9, 2012 at 22:01
• @JustinSatyr if you use getSeconds() then one second will be the margin of error in the timing. That's pretty poor. – Alnitak Commented Jan 9, 2012 at 22:03

4 Answers 4

This is (in my experience) the most precise way of getting timers to trigger as closely as possible to a clock time:

// 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, do the same again to trigger the next event.

Using setInterval causes other problems, including clock drift. The calculation based on the current time accounts for the time executing the callback itself.

You'll still also need to use Date().getTime() as well to figure out which frame of your animation to show.

The whole thing would 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 at http://jsfiddle/alnitak/JPu4R/

The answer is: yes you can.

• Use Date.getTime() to monitor time
• Trigger your js function every 30 seconds

You could do something like this. This way, no matter when you launched the different browsers, their rotations would be in sync.

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');
    }
}

Why not launch one window from the other - that way the parent window will have plete control over when the animation starts, because they are in the SAME PROCESS. No clocks required.