Question

所以我有这个奇怪的问题，我正在点击，我有一个幻灯片放映，其中设置间隔激发jquery动画方法。一切都很棒。

直到我切换标签。如果我在一段时间内使用幻灯片切换回切换选项卡，则会反复触发所有突然动画，而不会出现任何间隔。喜欢它正在追赶。

我认为它与RequestAnimationFrame和jQuery的animate方法有关。以及制表符处于非活动状态时如何抑制动画渲染。虽然间隔时间很长，但即使窗口处于非活动状态，也会持续点亮。

任何人都可以详细说明这一点，我会非常感激。

以下是执行此操作的核心代码：

function animate(setCurrent){
    animationDistance = opt.cSlideWidth * (opt.cCurrentSlide - 1);
    carousel.animate({left: '-' + animationDistance}, opt.cTransitionSpeed});
}
opt.cSetUpIntervalMethod = function(action){
    if (action === 'start') {
        clearInterval(opt.cSlideTimer);
        opt.cSlideTimer = setInterval(function(){animate();},opt.cSlideDelay);
    }
}
opt.cSetUpIntervalMethod('start');

Answer 1

这是旧版JQuery中的一个错误，自从1.6.3版本开始修复。更新您的版本。

“我们对浏览器的requestAnimationFrame API寄予厚望增加了对1.6版的支持。然而，其中一个最高的量我们从那时起收到的投诉与此有关 requestAnimationFrame在选项卡不可见时执行。一切选项卡不可见“堆栈”时启动的动画，而不是执行直到选项卡重新聚焦。然后他们都以翘曲速度制作动画！我们已经删除了对此API的支持（具有没有影响你调用jQuery的动画功能的方式）并计划将它整合到jQuery的未来版本中。“

http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/

Answer 2

当页面转到后台以保留CPU和电池时，Chrome和Firefox会降低间隔计时器的速度。当你把它带回到前台时，他们试图“弥补”一些失去的计时器。有关其实施内容的简要说明，请参阅this post in the Chromium blog。

解决问题的最佳方法是在窗口退出视图时停止动画，并在窗口返回视图时再次启动动画。

Chrome有experimental API这样做。如果不可用，则回退方法涉及使用焦点检测来查看焦点是否在窗口中的任何位置。

Answer 3

不要将setinterval（）用于可能失去焦点的动画。使用.delay(milliseconds)和递归的javascript方法调用完成相同的效果。

jquery animate，设置间隔和非活动窗口问题

3 个答案: