如果选项卡失去焦点，FireFox 中的 setInterval 循环出现 jQuery 动画问题

Question

我开发了一个小脚本，使用 jQuery 和 animate() 函数使文本看起来像是来自远方。 我有两个主要问题。第一个描述如下： Chrome 中的 Jquery 字体大小动画问题，太迟缓

第二个是我需要循环播放动画。我的方法效果很好，但在 FireFox 中，它实现了一种资源节省机制，当浏览器的选项卡窗口处于后台时，这会让事情变得很奇怪。

我很确定这个问题是已知的，并且关注您可以在 Jquery doc 上阅读的 animate() 内容：

由于 requestAnimationFrame() 的性质，您永远不应该使用 setInterval 或 setTimeout 循环对动画进行排队。为了节省CPU资源，支持requestAnimationFrame的浏览器在窗口/选项卡未显示时不会更新动画。如果在动画暂停时继续通过 setInterval 或 setTimeout 对动画进行排队，则当窗口/选项卡重新获得焦点时，所有排队的动画将开始播放。为了避免这种潜在的问题，请使用循环中最后一个动画的回调，或者将一个函数附加到 elements.queue() 来设置启动下一个动画的超时。

...但我无法理解如何将解决方案应用于我的脚本。

您可以在此处测试和使用代码：http://jsbin.com/ehahoc/7/

只需在一个选项卡上打开代码，然后从另一个网站打开另一个选项卡，并使该选项卡与我的脚本在后台运行 30 秒，然后返回到代码选项卡，您将看到所有段落现在都带有没有协调或同步。

非常感谢！

Answer 1

我遇到了完全相同的问题。不好的事情是你将 setInterval/setTimeout 与 jQuery 的 .animate() 函数一起使用。

jQuery 文档说（来源）：

由于 requestAnimationFrame() 的性质，您永远不应该使用 setInterval 或 setTimeout 循环对动画进行排队。为了节省CPU资源，支持requestAnimationFrame的浏览器在窗口/选项卡未显示时不会更新动画。如果在动画暂停时继续通过 setInterval 或 setTimeout 对动画进行排队，则当窗口/选项卡重新获得焦点时，所有排队的动画将开始播放。为了避免这种潜在的问题，请使用循环中最后一个动画的回调，或者将一个函数附加到 elements.queue() 来设置启动下一个动画的超时。

乍一看，这听起来比实际上更困难。问题是 jQuery 向队列中添加了越来越多的动画，但是支持 requestAnimationFrame 的现代浏览器在您重新激活选项卡之前不会执行这些动画。您可以使用（或者在您的情况下仅检查）元素的 .queue() 来解决此问题。要了解 .queue()，已经有一篇关于该问题的文章 。

一个简单的解决方案可能是将 ChangeText() 函数的内容包装在以下条件中 - 在向其中添加新动画之前检查“fx”队列是否为空：

var $activeText = $(".container .active-text");

if( $activeText.queue('fx').length == 0 ) {
    // do funky animations, but only if the queue is empty...
}

这应该可以解决这种情况下的问题。您可以在此处找到修复示例的克隆版本。