Time Interval seconds run fast on tab changed Javascript

Question

I have an issue that hold my neck with time interval. I am calculating my time/clock one second at a time with the function below.

Header.prototype= {

 time_changed : function(time){
        var that = this;
        var clock_handle;
        var clock = $('#gmtclock');

        that.time_now = time;
        var increase_time_by = function(interval) {
            that.time_now += interval;
        };
        var update_time = function() {
             clock.html(moment(that.time_now).utc().format("YYYY-MM-DD HH:mm") + " GMT");
        };
        update_time();

        clearInterval(clock_handle);

        clock_handle = setInterval(function() {
            increase_time_by(1000);
            update_time();
        }, 1000);

    },
};

The above works fine and increase my time a second at a time correctly . However. I added another event that fires on web changed or tab navigated.

var start_time;
        var tabChanged = function() {
            if(clock_started === true){
                if (document.hidden || document.webkitHidden) {
                    start_time = moment().valueOf();
                    time_now = page.header.time_now;
                }else {
                    var tnow = (time_now + (moment().valueOf() - start_time));
                    page.header.time_changed(tnow);
                }
            }
        };

        if (typeof document.webkitHidden !== 'undefined') {
            if (document.addEventListener) {
                document.addEventListener("webkitvisibilitychange", tabChanged);
            }
        }

The above fires when ever user leave the page and comes back . It add the delay to the time. However, i notice the second increase rapidly . and very past my timer does not fire very second any more as specified in the clock hand. It add second every milliseconds and fats. Please why this and how do i fix this ? My time run fast and ahead when ever i change tab and returned . Any help would be appreciated

Update

Below is my WS request function.

Header.prototype = {

    start_clock_ws : function(){
            var that = this;

            function init(){
                clock_started = true;
                WS.send({ "time": 1,"passthrough":{"client_time" :  moment().valueOf()}});
            }
            that.run = function(){
                setInterval(init, 900000);
            };

            init();
            that.run();

            return;
        },
        time_counter : function(response){
            var that = this;
            var clock_handle;
            var clock = $('#gmt-clock');
            var start_timestamp = response.time;
            var pass = response.echo_req.passthrough.client_time;

            that.time_now = ((start_timestamp * 1000) + (moment().valueOf() - pass));

            var increase_time = function() {
                that.time_now += (moment().valueOf() - that.time_now);
            };
            var update_time = function() {
                 clock.html(moment(that.time_now).utc().format("YYYY-MM-DD HH:mm") + " GMT");
            };
            update_time();

            clearInterval(clock_handle);

            clock_handle = setInterval(function() {
                increase_time();
                update_time();
            }, 500);
        },

    };

and in my WS open event

if(isReady()=== true){
       if (clock_started === false) {
           page.header.start_clock_ws();
      }
   }

In my WS onmessage event

if(type ==='time'){
   page.header.time_counter(response);
}

Base on your suggestion, i modified my increase_time_by to

var increase_time_by = function() {
      that.time_now += (moment().valueOf() - that.time_now);
   };

It seems fine now. Would test further and see.

Answer 1

Instead of incrementing the clock by the value of the interval, just update the clock to the current time with each pass. Then it won't matter if you fire exactly 1000 ms apart or not.

You actually may want to run more frequently, such as every 500 ms, to give a smoother feel to the clock ticking.

Basically, it comes down to the precision of the timer functions, or lack thereof. Lots of questions on StackOverflow about that - such as this one.

---

Based on your comments, I believe you are trying to display a ticking clock of UTC time, based on a starting value coming from a web service. That would be something like this:

var time_from_ws = // ... however you want to retrieve it
var delta = moment().diff(time_from_ws);  // the difference between server and client time

// define a function to update the clock
var update_time = function() {
    clock.html(moment.utc().subtract(delta).format("YYYY-MM-DD HH:mm") + " GMT");
};

update_time(); // set it the first time
setInterval(update_time, 500); // get the clock ticking