当在浏览器选项卡之间移动时，setInterval跳转

Question

可能重复：

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

http://www.datingjapan.co

我有setInterval更改图像如下：

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

我注意到，当我在Chrome浏览器选项卡之间移动时，当我回到站点时(间隔过后)，图像会迅速跳转到下一个页面。能让这件事变得更顺利吗？还是让这发生在背景中？

任何有关这方面的信息都会很好。

thx

Answer 1

这种情况发生在setInterval上，但不发生在setTimeout上。诀窍是使用递归函数而不是setInterval。调用函数作为上一次动画的回调

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