1

As part of my react app, I have some setTimeout method to run timer and if that reached zero there is prompt will be pops up, which is working fine as long as the browser in in active state, suppose when we switch between one browser tab to another, I had a issue in delay of execution of this setTimeout intervals, it takes more time to reach zero than the configured one or the initial value that we setting.

Let's say timeoutInterval is 120 seconds as default value, then if we switch another tab this setInterval execution latency issue occured. any solution for this ?

Below is my setInterval method to execute timer.

 const [inactiveTimer, setInactiveTimer] = useState(120);
 useEffect(() => {    
     const inactiveInterval = setInterval(() => {
         if (timeoutInterval > 0) {
             setInactiveTimer(timeoutInterval - 1);
         } else if (timeoutInterval === 0) {
             setShowModal(true);
         }
     }, 1000);
     return () => {
        clearInterval(inactiveInterval);
     };
 }, []);
Krish
  • 489
  • 2
  • 8
  • 28
  • 3
    Does this answer your question? [Chrome: timeouts/interval suspended in background tabs?](https://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs) – flakerimi Dec 09 '21 at 13:41
  • First of all !!! find a way for cleaning-up your `setInterval` in `useEffect` – Mohammad Esmaeilzadeh Dec 09 '21 at 13:44
  • @MohammadEsmaeilzadeh: yes i'm already clearing just missed to add in the question :) still that issue persist anyways. – Krish Dec 09 '21 at 14:05

1 Answers1

1

When a tab is not active, the function can be called at a maximum of one per second. One option to solve this is to use Web Workers, because they run in separate process, hence are not slowed down.

Another option to solve this issue you can a hack by playing an ~empty sound which will force the browser to keep the regular performance.

More about this inactivation issue - https://codereview.chromium.org/6577021

Empty sound hack - How to make JavaScript run at normal speed in Chrome even when tab is not active?

Ran Turner
  • 14,906
  • 5
  • 47
  • 53
  • thanks for your info, do you have any sample or suggestion for that empty sound hack ? or the webworkers to use time interval ? – Krish Dec 09 '21 at 14:01
  • Please checkout this - https://stackoverflow.com/questions/32390789/how-to-make-javascript-run-at-normal-speed-in-chrome-even-when-tab-is-not-active#comment85520274_32390789 – Ran Turner Dec 09 '21 at 14:03
  • thanks in that above details link, in that this reference is helped http://github.com/turuslan/HackTimer - but we if we rename the hack js file name or any other filename renaming inside the reference also it's not works..!!1:( – Krish Dec 10 '21 at 05:26
  • https://github.com/turuslan/HackTimer - is this hack is actually setting some fake id to keep the inactive browser background activities like setTimeout/setIntervals as active ? is that save code ? or any possibilities on getting issue with VAPT scanning ? – Krish Dec 13 '21 at 03:20