在浏览器选项卡之间移动时，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。 Trick是使用递归函数而不是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();