jQuery .fadeIn + window.setInterval = A Bad Combination

jQuery’s .fadeIn and .fadeOut methods don’t fire when the window is out of focus. Instead, they wait until the user returns to the window / tab and then fire.

This fact caused me a problem when I was working on my own jQuery slideshow plugin.  In my implementation window.setTimeout would trigger a slide change every 10 seconds. I used jQuery’s fadeIn and fadeOut methods for a nice fading image transition.

Under normal circumstances the slideshow ran fine, changing images every 10 seconds. However if I went to another tab while the show was running and then came back minutes or hours later, the slides would rapid-fire transition until they caught up with the elapsed time.

I was about to submit a bug report to jquery when I noticed this note on the fadeIn page:

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

So, instead of filing a bug report, I changed my code to stop using window.setInterval and instead use a window.setTimeout call in the fadeIn callback function.  Using setTimeout means that it is still possible to get backed up while the tab is out of focus, but it can be at most one transition because the callback is only called once the transition completes.

function transitionSlides(newIndex) {
  slides[newIndex-1].fadeOut(1000);
  slides[newIndex].fadeIn(1000, function() {
    window.setTimeout(function() {
        transitionSlides(newIndex+1);
    }, 10000);
  });
}
This entry was posted in JavaScript, jQuery and tagged , , , , . Bookmark the permalink.

8 Responses to jQuery .fadeIn + window.setInterval = A Bad Combination

  1. Wene says:

    Thx a lot

  2. Pingback: javascript slideshow grow faster, why? - Programmers Goodies

  3. David says:

    What were they thinking?

  4. Gosunkugi says:

    but, actually, in the code you are exposing, you didn’t use the function “queue”

  5. Excellent post. this is really what i want.

    Jquery fadein fade out slideshow with diff. time code is working on my site.

    Thanks to the author to post like this.

    Please keep it up.

  6. Simon says:

    I was having this exact problem and your solution just about saved my life! I can’t thank you enough for this post.

  7. I realize this post is years old, but I was running into this same problem and this post was really helpful in resolving it. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>