Javascript bug when switching tabs

Question

Hello,
I'm developing a simple web site with an image slideshow on the front page. The slideshow is powered by javascript and are using javascript's "setTimeout" function to toggle between images with a jQuery animation. However, when I switch to another tab and wait for a while, then switch back, it seems like all animations that should have been run in the background has been queued up and then runs simultaneously as soon as I switch back to the original tab. Basically it freaks out for a few seconds when all stacked up animations are run, and then it goes back to the normal behaviour.
Is this a bug or a feature? And if it's a feature, how would you suggest that I code my javascript to avoid this problem?

Answer 1

See Additional Notes -section of JQuery's animate-function documentation
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.
Source: http://api.jquery.com/animate/#notes-0