Make this code work fine when tab is inactive

Question

I am pretty new to javascript. I have a little problem, I've looked this up and it seems like setInterval won't work at the "normal" speed if the tab is inactive. That needs to be solved.

Here is my code:

    window.onload = function(){

    function create() {
          $.ajax({
            url:"/includes/timer.php", //the page containing php script
           });
     }

    //Start first time
    var timez = <?php echo $server['newtime']; ?>;
    var realtimez = <?php echo time(); ?>;

    //Resetting
    function reset() {
    timez = <?php echo $server['newtime']; ?>;
    realtimez = <?php echo time(); ?>;
    }

    setInterval(function(){
        document.getElementById("timerz").innerHTML = timez - realtimez;
        realtimez++;

        if(realtimez > timez) {
            create();
            reset();
        }

        },1000);
}

Since I am pretty new to javascript, I can't seem to find a way to implement something that can check if the tab is inactive, and then speed up the interval to "normal" speed (1000ms).

Can somebody please help me doing it properly?

UPDATE: as I mentioned, I can't do it by myself. I've tried so many times. If somebody were to explain to me how to do it and try helping out with my code, then I would be very thankful.

Possible duplicate of [How can I make setInterval also work when a tab is inactive in Chrome?](https://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome) — Joe Wilson, Mar 09 '18 at 22:18
@JaxFlaxx That question has an answer that applies to all browsers — Sidney, Mar 09 '18 at 22:25

score 0 · Answer 1 · answered Mar 09 '18 at 22:25

Realistically, you can't. When a tab is no longer active, its priority gets lowered, which will impact the performance of JavaScript timers.

The best solution I've seen to this so far is to replace the default timing functions with this: https://github.com/turuslan/HackTimer

Read the docs and then include the scripts in your source.

What this script does is replaces the default timer functions (like setInterval) with Web Workers.

These run independently as a separate process, thus aren't given a lower priority when their parent tab is inactive.

Lee Kowalkowski · Accepted Answer · 2018-03-09T23:31:29.397

Your biggest issue is realtimez++ - you cannot guarantee your timed function will be called precisely once every 1000ms even if your tab stays active.

This fiddle measures the time between invocations, you can see it's not guaranteed precision, and yes, when the tab is inactive, it gets worse.

You have server-side (PHP) timestamps in your client-side (JS) code. Which is a good start. But you need to grab the client-side time at the same point, for reference, too:

var timez = <?php echo $server['newtime']; ?>;
var realtimez = <?php echo time(); ?>;
var startTime = new Date();

(Don't forget to reset startTime in your reset function, too)

Then instead of incrementing realtimez:

setInterval(function(){
    var elapsedSeconds = Math.round((new Date() - startTime) / 1000);
    document.getElementById("timerz").innerHTML = timez - (realtimez + elapsedSeconds);

    if(realtimez + elapsedSeconds > timez) {
        create();
        reset();
    }
},1000);

Thanks very much for this, but now the timer is increasing rather than decreasing? — Jax Flaxx, Mar 09 '18 at 23:28
Does it need brackets in `timez - (realtimez + elapsedSeconds)`? @JaxFlaxx — Lee Kowalkowski, Mar 09 '18 at 23:30

Make this code work fine when tab is inactive

2 Answers2