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

我有一个使用jquery的setIntervall（）函数无限滑动图像的站点

在Chrome 13中调用页面时，我切换到另一个选项卡，几秒钟后返回，图像滑动的速度更快，好像它试图保持在原来的位置，如果它没有切换到另一个选项卡

我如何解决这个问题

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

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

解决方案：

我选择了jfriend00的第一个建议。现在，当窗口处于非活动状态时，我将关闭计时器

---

可以找到这样做的简单代码。

最新版本的Chrome显然会降低setInterval的运行速度，当选项卡式页面位于后台时，当您将该页面向前移动时，它会试图跟上

谷歌在Chromium博客上说：

在即将发布的Chrome11中，我们计划减少CPU消耗，即使是使用setTimeout和setInterval的页面。对于后台选项卡，我们打算每秒运行每个独立计时器不超过一次。这一变化已经在Chrome开发频道和canary版本中实现

您的时间间隔为3.5秒，但动画本身使用的计时器可能要短得多

可能的解决方法：

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

最好的选择可能是确定何时停止，然后重新启动动画

这里有类似的问题：

---

仅供参考，Chrome有了新的实验性API来检测页面可见性，正是出于这个原因。您可以在此处阅读：。当您的页面可见但没有焦点时，它有助于解决问题。

您是否尝试过根本不使用

设置间隔

或

设置超时

，而只使用

动画

功能的

完成

功能启动下一张幻灯片？

delay

功能设置为2500（即，动画从

setInterval

的3500中减去1000）。我没有；我没有用Chrome试过，所以请告诉我它是否有效

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

---

嘿，你在使用jQuery1.6吗

这可能是因为1.6将requestAnimationFrame用于动画。 您可能需要检查此页面以替换setInterval、clearInterval

代码： [编辑：更新的源代码，编辑2：由于firefox错误，当前无法使用firefox。--我必须降级到JQuery 1.5]

博主：

然后，在调用setInterval（func，poll）的地方，现在调用 请求间隔（func，poll）。您称之为clearInterval（interval）， 现在调用clearRequestInterval（interval）

---

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

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

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

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

非活动浏览器选项卡缓冲某些setInterval或setTimeout功能。 停止（true，true）-将停止所有缓冲事件，并仅执行最后一个动画。 Firefox>5.0中也会出现此问题-请阅读本文：

setTimeout（）方法现在钳制为只发送一个 在非活动选项卡中每秒超时。此外，它现在可以进行嵌套 超时到HTML5规范允许的最小值：4 毫秒（而不是它用来夹紧的10毫秒）

在这里，您可以阅读动画的工作原理-它多次触发setInterval函数

试试

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>

var i=1；
$（文档）.ready（函数（）{
幻灯片（）；
$（“#下一步”）。单击（函数（）{
幻灯片（）；
});
});
函数幻灯片（）{
if（谢谢你的回答。我在切换到另一个选项卡时关闭了计时器，但我明天会测试你的代码，让你知道它是否有效。Christian，谢谢你-很高兴知道你有一个解决方案。感谢你提供的信息。大多数人使用setTimeout/setInterval进行重复动画，但我发现使用“delay（）与“animate”的回调机制或其他动画功能一样正常工作，在某些情况下更好。关于“失焦技术”，我想知道一件事当网页位于单独的窗口中且完全可见时，动画不会运行，但焦点窗口不可见。如果用户使用选项卡，则不会发生这种情况，但如果在足够大的屏幕上打开多个浏览器窗口，使这些窗口都可见，则会发生这种情况。您真正想知道的是它是否可见。我补充道d（对我上面的回答）Chrome页面可见性API的参考。英语是我的母语，我的也不完美！这里的问题是你的代码比你的英语好多少。不要太担心它。：-）为什么使用jfriend00的解决方案在不活动时关闭计时器，而不是使用nitek的.stop（）队列解决方案？