So I've got this JavaScript clock I'm working on and I want it to be perfectly synced with the clients' system clock. I know how to get the current time using a Date object and I know how to run the update function every 60000 milliseconds (1 minute). The thing is that the client might load the page when half a minute has already passed, making the clock lag behind with 30 seconds. Is there any way to just run the update function when the minute-variable actually changes? (I only want minute-precision.)

How I get the current time:

var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();

How I run the update function every 60000 ms:

setInterval(update,60000); //"update" is the function that is run

So I've got this JavaScript clock I'm working on and I want it to be perfectly synced with the clients' system clock. I know how to get the current time using a Date object and I know how to run the update function every 60000 milliseconds (1 minute). The thing is that the client might load the page when half a minute has already passed, making the clock lag behind with 30 seconds. Is there any way to just run the update function when the minute-variable actually changes? (I only want minute-precision.)

How I get the current time:

var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();

How I run the update function every 60000 ms:

setInterval(update,60000); //"update" is the function that is run

• javascript
• function
• time
• updates
• timing

• Can you show your current code so we can adapt? – acdcjunior Commented May 3, 2014 at 21:19
• Subtract 60 from the current amount of seconds, run the timeout in that time, and every one after that for a minute – tymeJV Commented May 3, 2014 at 21:19
• Like this? var t = time.getSeconds(); setTimeout(function() { setInterval(update, 60000); update(); }, (60-t) * 1000) (Thanks tymeJV) – cookie monster Commented May 3, 2014 at 21:20
• 2 @cookiemonster -- (60 - time.getSeconds()) * 1000 for the remaining time in the minute – tymeJV Commented May 3, 2014 at 21:21
• @tymeJV Do you mean I should check the remaining time in the minute each minute? Wouldn't it be enough to do it once and then go to 60000? – Axel K Commented May 3, 2014 at 21:24

4 Answers 4

When the user logs in, get the current time and seconds of the minute, subtract 60 to get the remaining seconds, then multiply to set the timer

var time = new Date(),
    secondsRemaining = (60 - time.getSeconds()) * 1000;

setTimeout(function() {
    setInterval(update, 60000);
}, secondsRemaining);

First, you have to understand that timers in javascript are not guaranteed to be called on time so therefore you cannot be perfectly synced at all times - javascript just isn't a real-time language like that. It is single threaded so a timer event has to wait for other javascript that might be executing at the time to finish before a timer can be executed. So, you must have a design that still does as best as possible even if the timer is delayed (called later than it's supposed to be).

If you wanted to try to stay as close to aligned and do the fewest screen updates and be the most friendly to mobile battery life, I'd suggest this self-aligning code which realigns itself on each tick based on the time remaining until the next minute change:

function runClock() {
    var now = new Date();
    var timeToNextTick = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
    setTimeout(function() {
        update();
        runClock();
    }, timeToNextTick);
}

// display the initial clock
update();
// start the running clock display that will update right on the minute change
runClock();

This has the advantage that it only calls the update once on the next minute boundary.

Working demo: http://jsfiddle.net/jfriend00/u7Hc5/

var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();
var currentSecond   =   time.getSeconds();

var updateinterval = setInterval(startTimer,(60-currentSecond)*1000);

function startTimer(){
    clearInterval(updateinterval);
    setInterval(update,60000);
}

function update(){
    var time = new Date();
    console.log(time.getSeconds());
}

I would set an interval to run each second, then check if time.getSeconds() == 0. This way you could execute an action whenever a new minute starts, based on the client time.