Run JS function every new minute

Question

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

Answer 1

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

Answer 2

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/

Answer 3

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

Answer 4

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.