javascript - Jquery setInterval too fast when coming from another tab

Question

I've got a site with endlessly sliding images using jquery's setIntervall() function.

When calling the page in Chrome 13 and I switch to another tab to come back a few seconds later the image sliding is happening faster, as if it tried to keep up to where it was if it hadn't switched to another tab.

How could I resolve this issue?

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").animate({left: -1 * offset}, 1000);
}

Solution:

I chose jfriend00's first advise. Now I turn the timer off when the window becomes inactive.

The simple code to do so can be found here.

Answer 1

At the beginning I would like to apologize for all the mistakes - my English is not perfect.

The solution of your problem may be very simple:

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}

inactive browser tabs buffer some of the setInterval or setTimeout functions. stop(true,true) - will stop all buffered events and execute immadietly only last animation. This problem will also appears in Firefox > 5.0 - read this article: Firefox 5 - changes

The window.setTimeout() method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).

here you can read, how animate works - it fires setInterval function many times. How animate really works in jQuery