title: setInterval function trying to catch up when switching to another window
body: <p>I have a code that cycle through 2 images.</p>
  
  <p>fading out the first, changing image and then fading in the seconds image.
  i'm repeating the process with setInterval function.</p>
  
  <p>when i'm watching the cycles, it looks fine.
  when i switch to another tab and return after 10 or 20 seconds, it's like trying to quickly catch up all the fadings and changes i missed ... (going crazy, in short)</p>
  
  <p>here is the setInterval function:</p>
  
  <pre><code>setInterval(function(){
  fadeout(PointerToImage, function() {
  ChangeImage(function() {fadein(PointerToImage);   } )
  
  });
  
  },5000);
  </code></pre>
  
  <p>if needed:
  <strong>Fadeout function:</strong></p>
  
  <pre><code>function fadeout(element,complete) { 
      var op = 1;  // initial opacity
      var timer = setInterval(function () {  //call the function every 50 milliseconds
          if (op &lt;= 0.1){   // stop the function when the op is lower then x and then make in invisible.
                  clearInterval(timer); // clear the timer ....
                       if ( typeof complete === 'function' ) // run  it only if complete is a function .....
              {
                  complete();
              }
  
                  return true;
          }
          element.style.opacity = op;  // for newer browsers
          op -= op * 0.01;  // reduce 10% each time
      }, 0.05);  // run every 50 seconds
      }
  </code></pre>
  
  <p><strong>fadein function:</strong></p>
  
  <pre><code>function fadein (element,complete) {   
      var op = 0.1  // initial opacity
      var timer = setInterval(function () {  //call the function every x milliseconds 
          if (op &gt;= 0.99){   // stop the function when the op is higher then x ....
          element.style.opacity  = 1;
          clearInterval(timer); // clear the timer ....
                      if ( typeof complete === 'function' ) // run  it only if complete is a function .....
              {
                  complete();
              }
  
          return true;
  
  
          }
          element.style.opacity = op;  // for newer browsers
          op += 0.01;  // reduce 10%
      }, 30);  // run every 50 seconds
  
      }
  </code></pre>
  
  <p><strong>ChangeImage function:</strong></p>
  
  <pre><code> function ChangeImage (complete)  {
  
  liran0.src=imagesarrays[indexid1];
   indexid1=indexid1 +1;
  
  
  if(indexid1 &gt;= imagesarrays.length){
          indexid1 = 0;
  }
  </code></pre>