检测页面上的任何内容是否正在动画化

Detecting if Anything on the Page is being Animated

本文关键字：是否 动画 任何内 检测      更新时间：2023-09-26

我知道:animated选择器，但目前我遇到了(可能是几个之一)较旧的IE的性能问题(去图)。我觉得这可能是我测试ANY页面动画的潜在方式。

目前我正在循环通过一个间隔，核心测试是 $('*').is(':animated') 。这个 $('*') 是我担心的…但因为我不知道确切的div/等是我的插件下面动画，我不知道怎么做!

var testAnimationInterval = setInterval(function () {
    if ( ! $('*').is(':animated') ) {  // all done animating
        clearInterval(testAnimationInterval);
        animationsFinished();  // callback function
    }
}, 300);
function animationsFinished() {
    // do whatever
}

有没有人找到更好/不同的方法来做这件事?尤其是在性能方面?

所有jQuery动画计时器都存储在数组$.timers中。一个选项是检查$.timers属性的length是否大于0:

if ($.timers.length > 0) {
    // something is animating
}

我认为在动画开始时将元素推送到数组中，并在动画完成后将其从数组中删除会更有效。或者更好的做法是，在动画开始时增加一个变量，并在动画完成时减少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);
}

当然，这是假设您可以访问开始/捕获动画结束的代码。

相关文章：