CODEWITHSUNDEEP
javascriptdartangular-dart
Anil Bansal
Anil Bansal

Reputation: 31

Insights on Inactive Tab Throttling involving Timers

I am building a web app where we have a definition of session length and when the user exceeds the length we have to show a timeout popup to the user.

Currently I have a periodic timer which runs every second checking the remaining time of the session and when it hits the desired value a callback is executed. However recently got to know about the Inactive Tab throttling scenario where the running of timers is indeterministic and may not run at all for tabs in background.

Question: Once the window is brought back into focus, will the timer run again or once it hangs up, the timer does not resume again?

If the timer runs again from what time will it start to run? Are the tick events buffered in a queue or not thrown at all when the tab is in the background.

Any documentation for this would be extremely helpful.

I tried reproducing this in various ways but the results were indeterministic.

Upvotes: 3

Views: 1407

Answers (3)

ArthurAkhmerov
ArthurAkhmerov

Reputation: 372

For scripts that rely on WindowTimers like setInterval() or setTimeout() things get confusing when the site which the script is running on loses focus. Chrome, Firefox and maybe others throttle the frequency at which they invoke those timers to a maximum of once per second in such a situation.

However this is only true for the main thread and does not affect the behavior of Web Workers. Therefore it is possible to avoid the throttling by using a worker to do the actual scheduling. This is exactly what worker-timers does.

Here is a replacement for setInterval() and setTimeout() which works in inactive tabs: https://www.npmjs.com/package/worker-timers.

Upvotes: 0

Noelio Lelio
Noelio Lelio

Reputation: 71

When it comes to handling timer events in the background, many browsers tend to restrict or completely suspend the execution of timers when a tab is idle or in the background to save system resources. As a result, timer events may be missed during this time. Specific documentation about this behavior may vary between browsers and may be subject to change with new versions. To get more detailed information about the behavior of timers in a specific browser, I recommend that you consult the official documentation of the browser or look for specific resources on the web for that specific browser and version.

Also, to manage the behavior of background timers in your specific case, you might consider using features like Web Workers, which allow you to run JavaScript code in the background on a separate thread and are not affected by the management of the browser's main tab timers.

Here you can find more information about Web Workers:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Upvotes: 1

Alexander Nenashev
Alexander Nenashev

Reputation: 22669

setTimeout and setInterval are throttled in inactive tabs, but resumed normally when a tab is activated. Use dates to find the timeout:

const start = new Date, today = new Date;
today.setHours(0, 0, 0, 0);

const timer = () => setTimeout(() => {
  if(new Date - start > 10000){
    console.log('timeout!');
    return;
  }
  timer();
}, 1000);

timer();
console.log('started');

Also when the timeout happens on an active tabs you can send a message to inactive tabs immediately through localStorage or BroadcastChannel so the inactive tabs could stop their timers.

Upvotes: 1

Related Questions