Проблема анимации jQuery с циклом с setInterval в FireFox, если вкладка теряет фокус - PullRequest
Новая
       27

Проблема анимации jQuery с циклом с setInterval в FireFox, если вкладка теряет фокус

1 голос
/ 15 сентября 2011

Я разработал небольшой скрипт, который делает тексты такими, как будто они издалека, с функциями jQuery и animate (). У меня есть 2 основные проблемы. Первый описан здесь: Проблема анимации размера шрифта Jquery в Chrome, слишком медленная

Во-вторых, мне нужно зациклить анимацию. То, как я это делал, работает хорошо, но в FireFox реализован механизм экономии ресурсов, который делает вещи странными, когда окна вкладок броузера находятся в фоновом режиме.

Я вполне уверен, что проблема известна, и касаемо того, что вы можете прочитать в Jquery doc для animate ():

Из-за характера requestAnimationFrame () вы никогда не должны ставить анимацию в очередь, используя цикл setInterval или setTimeout. Чтобы сохранить ресурсы ЦП, браузеры, поддерживающие requestAnimationFrame, не будут обновлять анимацию, когда окно / вкладка не отображается. Если вы продолжите ставить анимации в очередь с помощью setInterval или setTimeout, когда анимация приостановлена, все анимации в очереди начнут воспроизводиться, когда окно / вкладка восстановит фокус. Чтобы избежать этой потенциальной проблемы, используйте обратный вызов последней анимации в цикле или добавьте функцию к элементам .queue (), чтобы установить тайм-аут для запуска следующей анимации.

... но я не могу понять, как применить решение к моему сценарию.

Вы можете проверить и поиграть с кодом здесь: http://jsbin.com/ehahoc/7/

Просто откройте код на вкладке, затем откройте другую вкладку с другого сайта и оставьте вкладку с моим скриптом, работающим в фоновом режиме, в течение 30 секунд, затем вернитесь на вкладку кода и вы увидите, что весь абзац теперь приходит без координации или синхронизации.

Большое спасибо!

1 Ответ

1 голос
/ 20 сентября 2011

Я столкнулся с точно такой же проблемой.Плохо то, что вы используете setInterval / setTimeout вместе с функцией janu .animate ().

Документация jQuery гласит ( source ):

Из-захарактер requestAnimationFrame (), вы никогда не должны ставить анимацию в очередь, используя цикл setInterval или setTimeout.Чтобы сохранить ресурсы ЦП, браузеры, поддерживающие requestAnimationFrame, не будут обновлять анимацию, когда окно / вкладка не отображается.Если вы продолжите ставить анимации в очередь с помощью setInterval или setTimeout, когда анимация приостановлена, все анимации в очереди начнут воспроизводиться, когда окно / вкладка восстановит фокус.Чтобы избежать этой потенциальной проблемы, используйте обратный вызов вашей последней анимации в цикле или добавьте функцию к элементам .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...
}

Это должно решить проблему в этом случае.Вы можете найти клонированную версию своего фиксированного примера здесь .

...