Question

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

在Chrome 13中调用该页面时，我会切换到另一个标签，几秒钟后返回，图像滑动发生得更快，好像它试图保持到原来的位置，如果它没有切换到另一个标签

我该如何解决这个问题？

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

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

解决方案：

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

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

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） - 将停止所有缓冲的事件并仅执行immadietly上一次动画。这个问题也会出现在Firefox＆gt; 5.0 - 阅读这篇文章：Firefox 5 - changes

window.setTimeout（）方法现在限制发送不超过一个非活动选项卡中的每秒超时。此外，它现在夹紧嵌套超时到HTML5规范允许的最小值：4 ms（而不是用于钳位的10 ms）。

在这里你可以阅读，动画如何工作 - 它多次触发setInterval函数。 How animate really works in jQuery

Answer 2

当标签页在后台时，Chrome的最新版本显然会降低setInterval的操作速度，然后当您将该页面向前移动时，它会尝试赶上。

在Chromium博客上，Google表示：

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

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

解决问题的可能方法：

窗口不可见时停止计时器/动画。当窗口变得可见时重新启动计时器/动画。
使用setTimeout代替setInterval，然后在每次触发时重置setTimeout以创建自己的重复间隔 - 尽管在你的情况下，可能是jQuery使用定时器是问题 - 我不知道。 / LI>
让你的计时器减速，这样他们就不会与你发生冲突（再次可能是jQuery内部而不是你自己的计时器）。

最好的选择可能是找出何时停止然后重新开始动画。

类似的问题：Chrome: timeouts/interval suspended in background tabs?。

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

Answer 3

您是否尝试过根本不使用setInterval或setTimeout，但只需使用complete功能的animate功能启动下一张幻灯片？ 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);

Answer 4

嘿，你在使用Jquery 1.6吗？

这可能是原因，因为1.6使用requestAnimationFrame进行动画制作。您可能需要检查此页面以替换setInterval，clearInterval

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

代码： https://gist.github.com/1002116 [编辑：更新源代码，edit2：由于firefox错误，目前无法使用firefox。 - 我已经降级到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>

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

5 个答案: