Keep timer running on new tab with jQuery timer

Question

I am using this timer plugin https://github.com/jchavannes/jquery-timer and am trying to keep the timer active when a user opens a new tab. I have read a couple of SO posts on this subject (specifically this one), but am still a bit lost.

I have attempted to update the setTimer function within the timer.js file with the following code

this.setTimer = function(time) {
        var timer = this;
        if(typeof this.action != 'function') {return;}
        if(isNaN(time)) {time = this.intervalTime;}
        this.remaining = time;
        this.last = new Date();
        this.broswerDelay = new Date();
        this.increment = (1000 / 30);
        this.clearTimer();
        setInterval(function() {
            this.now = new Date();
            this.elapsedTime = (this.now.getTime() - this.broswerDelay.getTime());
            if(this.elapsedTime > this.increment)
            //Recover the motion lost while inactive.
                time = Math.floor(this.elapsedTime/this.increment);
            this.before = new Date();
        }, this.increment);
        this.timeoutObject = window.setTimeout(function() {timer.go();}, time);

    };

But this generates a console error for each tick (smashing my CPU through the roof in the process!)

Uncaught TypeError: Cannot read property 'getTime' of undefined

I feel like this is something simple that I am missing.

try setting cookie in the browser so that it can have memory of the time in the previous tab. — Hawk, May 29 '14 at 10:31
To clarify, the timer value doesn't need to be passed to the new tab, I just need to stop the tab with the timer running, from slowing down when there is a new tab open — terrorfall, May 29 '14 at 10:33

Zaenille · Accepted Answer · 2014-05-29T11:45:56.480

What you want to use is the requestAnimationFrame function.

What it does is basically what setTimeout(function,0) does, but when you go to a different tab, or whenever the tab where you're running the code is not active.

Add this to your code (it's also cross browser friendly) :

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
           window.setTimeout(callback, 1000/60);
         };
})();

and call requestAnimFrame(<function you want to call>) in this manner :

var prev=Date.now();
var functionYouWantToRunOnLoop = function(){
  var current = Date.now();
  var elapsed = current - prev; //time difference between 2 function calls
  prev = current;

  //stuff you want to do while using the value of elapsed for computations

  requestAnimFrame(functionYouWantToRunOnLoop);
}

requestAnimFrame(functionYouWantToRunOnLoop);

References : http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Where does this need to go in relation to my code? That's the bit I'm having trouble with. Also, you say this is cross browser, but it doesn't support anything less than IE10. We need to target IE8 — terrorfall, May 29 '14 at 11:56

Keep timer running on new tab with jQuery timer

1 Answers1