Simultaneous Clock Ticks

Question

Hi,I'm using jquery clock to demonstrate time in my application.
In this application,there are two different browser windows where one of these triggers the other as its pop up window.
In these two windows,I'm using jclock instances,but somehow these clocks don't both tick as one.

http://plugins.jquery.com/files/jquery.jclock-1.2.0.js.txt

$(document).ready(function () {
      $('#clock').jclock({ format: '%d %B %A %Y %H:%M:%S' });
});

<div id="clock"></div>

Why are these clock not simultaneous ?
How can I achieve that ?
Thank you

Answer 1

It's probably because jclock simply uses a timeout interval of 1000 ms to update the clock view, without aligning the updates to the 0th millisecond.

I can think of two workarounds:

1. Don't directly initialize jclock inside the popup but let the parent window initialize both its own and the popup's jclock instances. Maybe that way, the clocks will run sync.
2. In both the main window and the popup: Read the current milliseconds and set a timeout to expire after current milliseconds % 1000 ms. When your timeout expires, initialize jclock. This probably won't be as accurate as option #1 since you cannot guarantee the timely firing of setTimeout.

Answer 2

Might be a usecase for the localStorage store event

Communicate between windows/tabs using localStorage