jQuery fadeOut()/fadeIn(): work in background?

Question

JavaScript

Good day, dear Khabrovites!

I ran into a previously unknown problem with jquery.fadeIn() and fadeOut() in a collapsed tab.

The situation is as follows: banners on the site are changed every 5 seconds using setTimeout() .
Banners change each other by fadingOut() of the current one and simultaneously with it fadeIn() of the next one. This also highlights switchers with banner numbers by simply changing the class of the corresponding <span> .

If you minimize the tab for 2-3 minutes, and then open it, then the banners will frantically change each other one by one (it seems that jquery put all the fade-function calls triggered by the timer into the queue while the tab was minimized, and launched the whole queue when activated).

How to deal with it? How to make graphical fadein/fadeout processes run in shadow/background?

Thanks in advance to everyone for your help!

Answer 1

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.
Sometimes it's good to read the doc. (comment to the article about .animate()