Pauză setTimeout la ieșire din fereastră

[Marius]

Codul de mai jos trimite un 'event' 30s la Google Analytics după 30 de secunde când un utilizator intră pe pagină.

Cod: Selectaţi tot

setTimeout(function(){
   gtag('event', '30s');
}, 30000);

Dar când utilizatorul minimizează fereastra, evenimentul încă se declanșează.

Ceea ce vreau este o modalitate de a pune pauza la setTimeout când utilizatorul minimizează pagina și, când maximizează pagina, timpul din setTimeout sa continue să se numere din momentul în care s-a oprit.
E vreo modalitate de a face asta?

Poti sa urmăresti când o pagină își pierde focalizarea utilizând 'visibilitychange'. Când vizibilitatea se schimbă, poti folosi 'document.hidden' pentru a vedea dacă documentul este ascuns.
Când este ascuns, opresti setTimeout și retii timpul rămas într-o variabilă; când pagina este afișata, setezi un setTimeout cu timpul rămas.
Cam asa:

Cod: Selectaţi tot

let run = false;
const fn = () => {
  gtag('event', '30s');
  run = true;
};
let timeoutId;
let runAt;
let timeLeft = 30_000;
const resume = () => {
  runAt = Date.now() + timeLeft;
  timeoutId = setTimeout(fn, timeLeft);
};
resume();

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    timeLeft = runAt - timeLeft;
    clearTimeout(timeoutId);
  }
  else if (!run) resume();
});