Обнаружение, если что-нибудь на странице анимируется


Я знаю о селекторе :animated, но в настоящее время сталкиваюсь с (что может быть одним из немногих) проблемой производительности для более старых IE (go figure). Я чувствую, что потенциально это может быть тем способом, который я тестирую для любая анимация страницы .

В настоящее время я перехожу через интервал, при этом основным тестом является $('*').is(':animated'). Это $('*') вот о чем я беспокоюсь... но поскольку я не знаю точно, что такое divs / etc, которые анимируются под моим плагином, я не конечно, как еще это сделать!

var testAnimationInterval = setInterval(function () {

    if ( ! $('*').is(':animated') ) {  // all done animating
        clearInterval(testAnimationInterval);

        animationsFinished();  // callback function
    }
}, 300);

function animationsFinished() {
    // do whatever
}

Кто-нибудь нашел лучший / другой способ сделать это? Особенно когда речь заходит о производительности?

2 2

2 ответа:

Все таймеры анимации jQuery хранятся в массиве $.timers. Один из вариантов-просто проверить, является ли length свойства $.timers больше нуля:

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);
}

Это, конечно, при условии, что у вас есть доступ к коду, который запускает / ловит конец ваших анимаций.