javascript - Run setTimeout only when tab is active

Question

Is there a way to stop setTimeout("myfunction()",10000); from counting up when the page isn't active. For instance,

1. A user arrives at a "some page" and stays there for 2000ms
2. User goes to another tab, leaves "some page" open.
3. myfunction() doesn't fire until they've come back for another 8000ms.

Answer 1

(function() {
  var time = 10000,
      delta = 100,
      tid;

  tid = setInterval(function() {
    if ( document.hidden ) { return; }    
    time -= delta;
    if ( time <= 0 ) {
      clearInterval(tid);
      myFunction(); // time passed - do your work
    }        
  }, delta);
})();

Live demo: https://jsbin.com/xaxodaw/quiet

---

Changelog:

• June 9, 2019: I’ve switched to using document.hidden to detect when the page is not visible.