如果选项卡失去焦点，则在 FireFox 中使用 setInterval 循环的 jQuery 动画问题

Question

我开发了一个小脚本，使用 jQuery 和 animate() 函数使文本看起来像是来自远方。 我有两个主要问题。第一个在这里描述： Jquery font size animation problem in Chrome, too laggy

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

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

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

...但我不明白如何将解决方案应用于我的脚本。

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

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

非常感谢！

Answer 1

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

jQuery 文档说 (source)：

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

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

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

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

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

这应该可以解决这种情况下的问题。您可以找到您的固定示例的克隆版本here。