Animations should not be queued with setInterval or setTimeout

[adamnbowen]

I was getting some strange behavior with my slideshow--specifically, when the tab is not active for a while, all of the animations try playing at once when I return to the page, which leads to lots of strange flickering, and then the slideshow doesn't work properly afterward (some slides will have permanent opacities of .23, etc.). I found what seems to be the root cause:

from the jQuery docs (specifically http://api.jquery.com/fadeIn/ ): "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."

I see you use setTimeout and setInterval in your plugin, though I'm afraid I currently lack the expertise to easily modify your code to use .queue() and friends instead.

[ryanflorence]

Wow, craziness, I can confirm this. Will change to setTimeout.

[adamnbowen]

Will changing it to setTimeout work? The docs mention both setInterval and setTimeout as criminals

[ryanflorence]

Hmm, I'll have to look into it some more, slideshow was generally ported from my MooTools version w/o this issue. The effects engines are vastly different, I need to see exactly what jQuery's stuff is doing. But I can't reproduce it anymore (weird).

[adamnbowen]

Well, when you push your changes, I'll see if the problems are still happening on my end. Otherwise, I guess we're good...

[ryanflorence]

For now you can stop the slideshow in the blur event of the window.

var slideEl = $('slideshow').slideshow(opts);
$(window).bind('blur', function (){
  slideEl.slideshow('stop');
});

And if you want to play, do the same but on focus and call play.

[adamnbowen]

Ah, good thinking--didn't occur to me, for whatever reason. The site I'm developing is still in super-early development, so I'm not too worried, though it is nice to have a quick-fix. Thanks :)

[adamnbowen]

Per the changelog in jQuery 1.6.3, this shouldn't happen anymore---they've removed requestAnimationFrame from the API for the time being until they can iron out the unfocused tab issue :)

[danielroot]

Hi, I'm also experience this issue. When I leave the tab and come back the animation spins non-stop. It happens on the demo site as well. Any new fixes? The plugin is awesome otherwise. thanks!

[adamnbowen]

@danrootdesign ---you take care of the non-stop spinning with this bit of code (adjust the variables, whether you are using slideshow() or slideshownav(), etc. to fit your own site):

$(window).bind('blur', function() {
  $('#slideshow').slideshownav('stop');
});
$(window).bind('focus', function() {
  $('#slideshow').slideshownav('play');
});

[ryanflorence]

Pretty sure this is a jQuery bug http://bugs.jquery.com/ticket/9381, which has been fixed by this commit https://github.com/jquery/jquery/commit/2053d1c621e8ef65b79d6b339d7336c732ed1b82. Need to verify, but for now use adamnbowen's workaround or upgrade jQuery.

[danielroot]

I've updated to the latest jQuery and the issue hasn't been occurring anymore. Thank you both very much!