Javascript setInterval doesn't work correctly when tab is not active

Question

function initTimer(timeLeft) {
     var Me = this,
     TotalSeconds = 35,
     Seconds = Math.floor(timeLeft);

     var x = window.setInterval(function() {
         var timer = Seconds;

         if(timer === -1) { clearInterval(x); return; }

            $('#div').html('00:' + (timer < 10 ? '0' + timer : timer));
            Seconds--;

         },1000);
     }

I have this code. Everything works fine, when this tab is active in browser, but when I change tab and return in tab later it has problems. To be more precise, it Incorrectly displays the time.

I'd also tried setTimeout, but problem was the same.

One idea, which I have is: HTML5 Web Workers...

But here is another problem... browsers support.

can someone help to solve this problem? How can I write setInterval, which works properly,even when tab is not active

Browsers can and do throttle calls to setInterval callbacks when the tabs are not active. You need to take this into account when designing your code. — James Thorpe
– James Thorpe, Commented Jun 16, 2015 at 15:43
timers are NOT real-time. If you ask a timer to fire every 1 second then all it guarantees you is that it won't fire sooner than 1 second. It could be a lot later (especially if the tab is inactive). If you want to accurately measure time then record the time when you start the timer and then on each tick calculate the elapsed time with Date.now() — Matt Burland
– Matt Burland, Commented Jun 16, 2015 at 15:44
Further to my point - even if the tab is active, setInterval only guarantees a minimum time until your code is called. If you're doing time based calculations, you're better off keeping hold of the "starting time" and doing further calculations based off that, rather than incrementing/decrementing a variable. — James Thorpe
– James Thorpe, Commented Jun 16, 2015 at 15:45

Matt Burland · Accepted Answer · 2015-06-16 15:55:30Z

Use the Date object to calculate time. Don't rely on a timer firing when you ask it to (they are NOT real-time) because your only guarantee is that it'll not fire before you ask it to. It could fire much later, especially for an inactive tab. Try something like this:

function  initTimer(periodInSeconds) {
            var end = Date.now() + periodInSeconds * 1000;


            var x = window.setInterval(function() {
                var timeLeft = Math.floor((end - Date.now()) / 1000);

                if(timeLeft < 0) { clearInterval(x); return; }

                $('#div').html('00:' + (timeLeft < 10 ? '0' + timeLeft : timeLeft));
            },200);
        }

initTimer(10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>

Note that by checking it more frequently we can make sure it's never off by too much.

The Spooniest · Accepted Answer · 2015-06-16 16:13:03Z

JavaScript timers are not reliable, even when the tab is active. They only guarantee that at least as much time as you specified has passed; there is no guarantee that exactly that amount of time, or even anything close to it, has passed.

To solve this, whenever the interval fires, note what time it is. You really only need to keep track of two times: the current time, and the time that the previous interval fired. By subtracting the previous tick's time from the current tick's time, you can know how much time has actually passed between the two, and run your calculations accordingly.

Here's a basic outline of how something like this might look:

function  initTimer(timeLeft) {
        var Me           = this,
            TotalSeconds = 35,
            Seconds      = Math.floor(timeLeft),
            CurrentTime  = Date.now(),
            PreviousTime = null;

        var x = window.setInterval(function() {
            var timer = Seconds,
                timePassed;
            PreviousTime = CurrentTime;
            CurrentTime = Date.now();
            timePassed = CurrentTime - PreviousTime;

            if(timer < 0) { clearInterval(x); return; }

            $('#div').html('00:' + (timer < 10 ? '0' + timer : timer));
            Seconds = Seconds - timePassed;

        },1000);
    }

Collectives™ on Stack Overflow

Javascript setInterval doesn't work correctly when tab is not active

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related