setInterval jumps when move between browser tabs

Question

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

http://www.datingjapan.co

I have setInterval changing images as follows:

    var initialFadeIn = 1000;           //initial fade-in time (in milliseconds)
    var itemInterval = 6000;            //interval between items (in milliseconds)
    var fadeTime = 2500;                    //cross-fade time (in milliseconds)

    var infiniteLoop = setInterval(function(){
        position1.eq(currentItem1).fadeOut(fadeTime);
        if(currentItem1 == numberOfItems1 -1) {currentItem1 = 0;}else{currentItem1++;}
        position1.eq(currentItem1).fadeIn(fadeTime);
    }, itemInterval);

I notice when I move between browser tabs in Chrome that when I come back to the site (after the interval has passed) the images quickly jump to the next. Is it possible to make this smoother? or make this occur in the background?

any info on this would be great.

thx

This was answered in: http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome I'm not sure how to link to a specific post, but search for the one with the link: http://jsfiddle.net/7f6DX/31/ You can also just go to that link for a proposed method that works. — conrad10781, Feb 26 '12 at 03:31

score 0 · Accepted Answer · answered Feb 26 '12 at 03:59

It happens with setInterval but not with setTimeout. Trick is to use a recursive function instead of setInterval. Call the function as callback of last animation

function infiniteLoop() {
    setTimeout(function() {
        position1.eq(currentItem1).fadeOut(fadeTime);
        if (currentItem1 == numberOfItems1 - 1) {
            currentItem1 = 0;
        } else {
            currentItem1++;
        }
        position1.eq(currentItem1).fadeIn(fadeTime, infiniteLoop);
    }, itemInterval);
}

infiniteLoop();

setInterval jumps when move between browser tabs

1 Answers1