jQuery animation issue with loop with setInterval in FireFox if tab loses focus

Question

I developed a little script that make texts like they were coming from far, with jQuery and animate() function. I have 2 main problem. The first is described here: Jquery font size animation problem in Chrome, too laggy

The second is that I need to loop the animation. The way I did works well, but in FireFox it has been implemented a resource saving mechanism that makes things weird when the tab windows of the broser is in background.

I'm quite sure the problem is known, and concern what you can read on Jquery doc for animate():

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.

...but I cannot understand how to apply a solution to my script.

You can test and play with the code here: http://jsbin.com/ehahoc/7/

Just open the code on a tab, then open another tab from another website and keep the tab with my script running in the background for 30 sec, then come back to the code tab and you will see that all the paragraph are now coming with no coordination or sync.

Many thanks!

Answer 1

I ran into the exact same problem. The bad thing is that you use setInterval/setTimeout together with jQuery's .animate() function.

The jQuery documentation says (source):

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.

At the first glance this sounds more difficult than it actually is. The problem is that jQuery adds more and more animations to the queue, but modern browsers that support requestAnimationFrame do not execute these animations until you re-activate the tab. You can solve this using (or in your case just checking) the .queue() of the element. To understand the .queue(), there's already an article about that.

A simple solution could be to wrap the content of your changeText() function in the following condition - checking the "fx" queue to be empty before adding new animations to it:

var $activeText = $(".container .active-text");

if( $activeText.queue('fx').length == 0 ) {
    // do funky animations, but only if the queue is empty...
}

This should fix the problem in this case. You can find a cloned version of your fixed example here.