jquery animation freaks out in background

I have made a little animation that resembles the coverflow itunes uses as a screensaver on mac. It fetches a list with filenames using ajax and starts looping over them to randomly fill divs with them.

Demo code: http开发者_运维知识库://jsfiddle.net/FQmXK/4/

All of this works great but the problem starts when you minimize the browser or go to a different tab on google chrome. The animation seems to queue up a bunch of cycles and tries to execute them all when the window is opened up again. This is causing all sorts of problems, images being undefined, all kinds of flashing on the screen...

I was wondering if there is any established solution for this queueing behavior? Can I force it to execute all animation even if its not visible?

---

You can detect browser window focus : Is there a way to detect if a browser window is not currently active?

And set a variable. If the window is inactive, set a variable to false, and do not queue further animations until the window becomes active.

---

This question discusses the same problem and provides a generalized solution:

How can I make setInterval also work when a tab is inactive in Chrome?