intervals stack when i'm on another tag - firefox

Thanks for reading.

On my homepage I've made an script that loops thru a list making list items to change their class.

Thing is, in Firefox, when I'm on another tab for some time, the animations starts stacking. And when I go back to the tab containing my home page, the loop starts at a really high speed and doesn't go back to normal until all the stacked 开发者_开发知识库animations finish.

How to stop this? :S

EDIT: Let me try to explain a bit.. When the list item's class changes, there're some fading animations going on there. Every 9 seconds some graphics and text fadeIn and others fadeOut because of it.

So if I'm on another Firefox tab, writing here for example, and I go back to my Site's tab, this animations start going like crazy, like they were waiting for me to go back, and they happen like every 0.1seconds untill all the ones waiting finish and they go back to normally change every 9 seconds.

Firefox introduced setInterval clamping as of 5.0. I don't know if this is the cause of your issue by in your animation code try using .stop():

$("selector").stop(true,true).animate(...)

You probably need to read the second note at http://api.jquery.com/animate/#notes-0

How about using setTimeout rather than setInterval. setInterval will stack up because the code within the setInterval gets called every interval. setTimeout with a recursive call will not stack up because each subsequent call requires the previous to complete.

function do_timeout() {
    /*do your timeout code*/
    setTimeout(function () {do_timeout();}, 1000);
}
$(document).ready(function () {
    do_timeout();
});