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

Answer 1

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();