Javascript event triggers based on local clock

Question

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?

`if (getSeconds() == 0) { } else if (getSeconds() == 30) { }` — Devin Burke, Jan 09 '12 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, Jan 09 '12 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, Jan 09 '12 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, Jan 09 '12 at 22:03

Alnitak · Accepted Answer · 2012-01-09T21:43:02.307

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.net/alnitak/JPu4R/

score 0 · Answer 2 · answered Jan 09 '12 at 21:17

0

The answer is: yes you can.

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

answered Jan 09 '12 at 21:17

Arnold Zokas

8,306
6
50
76

are you seriously suggesting that he _poll_ for the time changing? – Alnitak Jan 09 '12 at 21:29
That wouldn't put the two browsers in sync, because I couldn't ensure they polled at the same times – hud Jan 09 '12 at 21:43

Diodeus - James MacFarlane · Answer 3 · 2012-01-09T21:56:45.717

0

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

edited Jan 09 '12 at 21:56

answered Jan 09 '12 at 21:21

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 4 · answered Jan 09 '12 at 21:23

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

Javascript event triggers based on local clock

4 Answers4

Linked