title: Pausing setInterval when page/ browser is out of focus
body: <p>I have a simple slideshow that I've made on a client's homepage, using setInterval to time the rotations.</p>
  
  <p>To prevent browsers from screwing up setInterval when the page isn't in focus (another tab is being viewed, or another programme), I'm using:</p>
  
  <pre><code>function onBlur() {
              clearInterval(play);
          };
  
          function onFocus() {
  
              mySlideRotateFunction();
  
          };
  
          if (/*@cc_on!@*/false) { 
              document.onfocusin = onFocus;
              document.onfocusout = onBlur;
          } else {
              window.onfocus = onFocus;
              window.onblur = onBlur;
          }
  </code></pre>
  
  <p>Where mySlideRotateFunction sets the setInterval and runs some jQuery. While this works the majority of the time, I find that, on occasion, it appears as though onBlur hasn't run, and when I return to the page the timings have 'built up' and the rotations go crazy.</p>
  
  <p>I can't quite determine a cause as to why this happens on occasion, and not on others.</p>
  
  <p>My question- is there a problem with my code, and does anyone have a better suggestion for 'pausing' setInterval when browser window is out of focus?</p>
  
  <p>Thanks</p>