анимация JavaScript, стоящая в очереди, когда страница не имеет фокуса

Question

Таким образом, эта скользящая анимация прекрасно работает при просмотре на странице, но если я захожу на другую вкладку браузера на пару минут и возвращаюсь на эту вкладку, это похоже на то, что все анимации стоят в очереди, пока меня нет, и запускаем сверхбыстрый все сразу,Это выглядит ужасно ... Есть идеи?

$ (документ) .ready (function () {

var timeOuts = new Array();
var currentSlide = 0;
var slides = $('.banner_images').length;

homeanimation(currentSlide);
function homeanimation(i) {

    if (i == slides) { i = 0; }
    $('.banner_images:eq(' + i + ')').css('left', '-901px');
    $('.banner_images:eq(' + i + ')').animate({ "left": "0px" }, 800);
    $('.overlay-content:eq(' + i + ')').fadeIn(1500);
    timeOuts[0] = setTimeout(function() { $('.banner_images:eq(' + i + ')').animate    ({ "left": "901px" }, 800) }, 6000);
    timeOuts[1] = setTimeout(function() { $('.overlay-content:eq(' + i + ')').fadeOut(700) }, 6000);
    timeOuts[3] = setTimeout(function() { currentSlide = i + 1; }, 6000);
    timeOuts[2] = setTimeout(function() { homeanimation(currentSlide); }, 6000);

}

});

Answer 1

http://api.jquery.com/animate/:

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

Answer 2

отказ от setTimeouts.они ведут себя странно, когда речь идет о фокусировке окна.проверить естественную функциональность jQuery .queue () .

Answer 3

Обновление до 1.6.3+

http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/

Они вытащили requestAnimationFrame в 1.6.3, который является причиной вашей проблемы (скорее всего)