来自另一个选项卡时，Jquery setInterval 太快

Question

我有一个使用 jquery 的 setIntervall() function 无限滑动图像的站点。

在 Chrome 13 中调用该页面并且我切换到另一个选项卡以在几秒钟后返回时，图像滑动发生得更快，就好像它试图跟上它没有切换到另一个选项卡的位置一样。

我该如何解决这个问题？

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").animate({left: -1 * offset}, 1000);
}

解决方案：

我选择了jfriend00的第一个建议。 现在，当 window 变为非活动状态时，我关闭定时器。

可以在此处找到执行此操作的简单代码。

Answer 1

一开始我想为所有的错误道歉——我的英语并不完美。

您的问题的解决方案可能非常简单：

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}

非活动浏览器选项卡缓冲一些 setInterval 或 setTimeout 函数。 stop(true,true) - 将停止所有缓冲事件并仅在最后一个 animation 立即执行。 这个问题也会出现在 Firefox > 5.0 - 阅读这篇文章： Firefox 5 - changes

window.setTimeout() 方法现在限制在非活动选项卡中每秒发送不超过一个超时。 此外，它现在将嵌套超时限制为 HTML5 规范所允许的最小值：4 毫秒（而不是之前的 10 毫秒）。

在这里您可以阅读 animate 的工作原理 - 它会多次触发 setInterval function。 动画在 jQuery 中的真正工作原理

Answer 2

当标签页处于后台时，最新版本的 Chrome 显然会减慢 setInterval 的操作，然后当您将该页面向前移动时，它会试图赶上。

在 Chromium 博客上，谷歌表示：

在即将发布的 Chrome 11 版本中，我们计划减少 CPU 消耗，即使对于使用 setTimeout 和 setInterval 的页面也是如此。 对于后台选项卡，我们打算每秒运行每个独立计时器不超过一次。 此更改已在 Chrome 开发通道和金丝雀版本中实现。

您的间隔是 3.5 秒，但 animation 本身可能使用更短的计时器。

可能的解决方法：

• 当 window 不可见时停止计时器/动画。 当 window 变为可见时，重新启动计时器/动画。
• 而不是setInterval，使用setTimeout，然后在每次触发时重置setTimeout以创建您自己的重复间隔-尽管在您的情况下，问题可能是jQuery对计时器的使用-我不知道。
• 减慢您的计时器，以免它们与此发生冲突（同样可能在 jQuery 内部，而不是您自己的计时器）。

最好的选择可能是弄清楚何时停止然后重新启动 animation。

类似的问题： Chrome: timeouts/interval suspends in background tabs? .

仅供参考，Chrome 有新的实验性 API 用于检测页面可见性正是出于这个原因。 你可以在这里阅读： http://code.google.com/chrome/whitepapers/pagevisibility.html 。 当您的页面可见但没有焦点时，它有助于解决问题。

Answer 3

您是否尝试过完全不使用setInterval或setTimeout ，而只是使用animate function 的complete function 来开始下一张幻灯片？ delay function 设置为 2500（即从setInterval的 3500 中减去动画的 1000）。 我还没有在 Chrome 上尝试过这个，所以请让我知道它是否有效。

var slider = function(n){
    $("#slideContent").delay(2500).animate({left: -1 * n * delta},
                                           1000,
                                           function(){slider(n+1)}
                                          );
};
slider(1);

Answer 4

嘿，您使用的是 Jquery 1.6 吗？

这可能是因为 1.6 使用 requestAnimationFrame 动画的原因。 您可能需要查看此页面以替换 setInterval、clearInterval

http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/

code: https://gist.github.com/1002116 [edit: updated source, edit2: currently doesnt work with firefox due to firefox bug. -- 我已经降级到 JQuery 1.5]

来自博主：

然后，在调用 setInterval(func, poll) 的地方，现在调用 requestInterval(func, poll)。 在调用 clearInterval(interval) 的地方，现在调用 clearRequestInterval(interval);

Answer 5

尝试setInterval()它的工作原理

<script type="text/javascript" src="js/jquery-1.5.js"></script>
        <script type="text/javascript">
            var i=1;
            $(document).ready(function(){
                slideShow();
                $("#next").click(function(){
                    slideShow();
                });
            });
            function slideShow(){
                if(i<3){
                    $("#slide-container").animate({ left:"+=35px" }, {  duration:500})
                    $("#slide-container").animate({ left:"-=735px" }, {  duration:250})
                    i++;
                }
                else {
                    $("#slide-container").animate({ left:"+=1400px" }, {  duration:1000})
                    i=1;
                }
                setTimeout('slideShow()',2000);
            }
    </script>