Javascripts "setInterval ()", используемый с анимацией jQuery, приводит к очереди функции - PullRequest
Новая
       14

Javascripts "setInterval ()", используемый с анимацией jQuery, приводит к очереди функции

2 голосов
/ 04 декабря 2011

Что происходит

Хорошо, поэтому я сделал функцию на своей главной странице, где некоторые продукты отображаются рядом друг с другом, исчезая, меняя продукты и исчезая каждые 5 секунд.Код выглядит следующим образом: 

var t;

$(document).ready(function(){
    // Some pre-animation stuff, like loading the products etc.

    // Initialize animation timer
    t = setInterval("changeProducts();", 5000);
};

function changeProducts() {
    // Fade out
    $("#anfBox").fadeTo(200, 0.01, function() {

    // Change products

    // Fade back in
    $("#anfBox").fadeTo(200, 1);
    });
}

Все выглядит нормально и работает как следует, за исключением того, что когда я захожу в другое окно на минуту, а затем возвращаюсь, функция changeProducts выполняется быстрораз (в зависимости от того, как долго я отсутствовал).Продукты исчезают, изменения снова появляются, а затем мгновенно повторяются, где должна быть ~ 5 секундная задержка.

То, что я пробовал

Так что я думаю Мне нужно сделать, это использовать что-то вроде clearInterval(t), когда фокус теряется из окна, затем повторно инициализировать таймер при повторном входе в окно, я просто не знаю, как это сделать, и я 'Мне трудно найти что-то полезное в Google.

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

Я также попытался использовать setTimeout() вместо этого, но безуспешно.

Любые идеи о том, как избежать очереди анимации, очень ценятся.

1 Ответ

4 голосов
/ 04 декабря 2011

С последними обновлениями браузера многие браузеры теперь останавливают выполнение кода, когда текущая страница или вкладка не активны.Когда вы возвращаете эту вкладку / окно, оно выполняет все действия, поставленные в очередь, и вы видите, что после каждого запускается поток эффектов.

Просто проверьте очередь эффектов, прежде чем применять другой эффект, если длина очереди равна 0, тогда применяется.

Попробуйте это ( пример ); 

var t;

function changeProducts() {
    // Fade out
    var $anfBox = $("#anfBox"),
        queue = $anfBox.queue('fx');
    if (queue && queue.length === 0) {
        $anfBox.fadeTo(200, 0.01, function() {
            // Change products
            // Fade back in
            $anfBox.fadeTo(200, 1);
        });
    }
}

$(document).ready(function() {
    // Some pre-animation stuff, like loading the products etc.
    // Initialize animation timer
    t = setInterval(changeProducts, 5000);
});
...