setInterval 在浏览器选项卡之间移动时跳转[重复]答案

【问题标题】：setInterval jumps when move between browser tabs [duplicate]setInterval 在浏览器选项卡之间移动时跳转[重复]
【发布时间】：2012-03-16 01:19:35
【问题描述】：

可能重复：
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 中的浏览器选项卡之间移动时，当我返回该站点时（在时间间隔过后），图像会快速跳转到下一个。是否有可能使这更顺畅？还是让它在后台发生？

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

谢谢

【问题讨论】：

回答于：stackoverflow.com/questions/5927284/… 我不知道如何链接到特定帖子，但请搜索带有链接的帖子：jsfiddle.net/7f6DX/31 您也可以直接转到该链接一种可行的建议方法。

标签： javascript jquery

【解决方案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();

【讨论】：