JQuery setInterval по минимизации

Question

У меня есть слайдер изображений, где изображения заменяют друг друга по таймауту. Я использую функцию jQuery setInterval (), но есть небольшая проблема: после минимизации окон браузера эта функция продолжает работать, и когда я восстанавливаю окна браузера, изображения заменяют друг друга с невероятно высокой скоростью, как все время после того, как окно было свернуто setInterval ( ) собирать действия, но выполнять их после восстановления окна.

Как приостановить setInterval () в браузере, чтобы свернуть или сохранить изображения подкачки, когда окна свернуты?

Answer 1

В документации для animate () прямо упоминается:

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

Таким образом, вы можете либо вызвать setTimeout() в обратном вызове вашей анимации, чтобы по возможности соединить следующий цикл, либо queue() вызовы на setTimeout() между вызовами на animate().

РЕДАКТИРОВАТЬ: Как требуется в комментариях, вот простой queue() пример.Приведенный ниже код устанавливает двухсекундную задержку между анимациями слайдов:

$("selector").slideUp("slow").queue(function(next) {
    window.setTimeout(next, 2000);
}).slideDown("slow");