检测页面上是不是有动画
Posted
技术标签:
【中文标题】检测页面上是不是有动画【英文标题】：Detecting if Anything on the Page is being Animated检测页面上是否有动画 【发布时间】：2012-12-22 12:07:39 【问题描述】：我知道:animated 选择器，但目前我遇到了（可能是少数几个）旧 IE 的性能问题（看图）。我觉得这可能是我正在测试 ANY 页面动画的方式。
目前我正在循环一个区间，核心测试是 $('*').is(':animated')。这 $('*') 是我担心的......但由于我不知道在我的插件下面动画的 divs / etc 是什么，我不知道还有什么去做吧！
var testAnimationInterval = setInterval(function ()
if ( ! $('*').is(':animated') ) // all done animating
clearInterval(testAnimationInterval);
animationsFinished(); // callback function
, 300);
function animationsFinished()
// do whatever
有没有人找到更好/不同的方法？尤其是在性能方面？
【问题讨论】：
我不知道，这很难捕捉到所有东西。特别是因为很多库/插件在<body> 上附加了一些东西，所以你可能需要一个非常通用的选择器，如*。您是否有任何方法知道页面上可能发生动画的特定区域？还是你不知道？
我可能会得到一般的 div 区域，那仍然能够检测到其中发生的任何/所有动画吗？
每 300 毫秒执行一次$("*") 将对任何浏览器的性能产生重大影响。如果您负责设置动画效果，请自行跟踪。
@mcpDESIGNS 是的，你会检查类似 $("#general_div_area").find(":animated").length 或 $("#general_div_area").find("*").is(":animated") 的内容
@Cerbrus jsperf.com/animated-jquery - 全部 3 种方式，正面交锋。
【参考方案1】：
所有 jQuery 动画计时器都存储在数组 $.timers 中。一种选择是检查$.timers 属性的length 是否大于零：
if ($.timers.length > 0)
// something is animating
【讨论】：
$.timers 是 jQuery 的一部分还是插件？我在 jQuery 文档中没有看到它。
@TJ。它不是 jQuery 的记录属性。您可以在源代码中找到它：github.com/jquery/jquery/blob/master/src/effects.js#L715.
@VisioN Damn you VisioN... 再次出现 :) 正如 -KevinB 所指出的 (jsperf.com/animated-jquery) 相比之下，这个速度太快了！不知道这个隐藏的内部 jQuery gem。再次感谢兄弟。
+1 好收获。不过，有趣的是，这个属性是无证的。【参考方案2】：
我认为在动画开始时将元素推送到数组中并在动画完成后将其从数组中删除会更有效。或者更好的是，在动画开始时增加一个变量，并在完成后将其减少 1。如果变量为0，则当前不应运行动画。
所以，一些伪代码：
var animatingElements = 0;
function animationStart() // Add this function in your animation start events;
animatingElements++;
function animationEnd() // Add this function in your animation end events;
animatingElements--;
if (animatingElements === 0)
clearInterval(testAnimationInterval);
这是，假设您当然可以访问开始/捕捉动画结尾的代码。
【讨论】：
这是如何通过外部库捕捉动画的？ 您是在告诉那个库开始制作动画，某处。animationStart() 那里。
是的，并非总是如此。一个简单、快速的示例是 jQuery UI “自动完成”。当结果显示/隐藏时，我看不到任何支持。虽然结果只是显示/隐藏（不完全是动画），但在某些情况下它们可能会淡入/淡出。无论哪种方式，都没有对此的支持，而且并非所有库都支持。假设您直接触发动画或支持在它之前和之后做某事，是不够的
@Cerbrus 我喜欢这个想法，但很遗憾，我无法对底层页面进行任何编辑！但是下一次，或者当我可以对其进行更新时，毫无疑问我会开始将它们存储在一个数组中。 （至少仅供参考）+1
@mcpDESIGNS：谢谢 ^_^ 我很高兴能帮上忙，即使 jQuery 有计时器数组：P以上是关于检测页面上是不是有动画的主要内容，如果未能解决你的问题，请参考以下文章
检测 Cocoa 动画是不是正在进行（使用 BOOL）以防止同时出现多个动画