javascript + jquery + setinterval + animation

Question

У меня проблема с setInterval и jquery animate. Вот мой код:

function slides1() { 

    ... 

    $("table#agah1").animate({ 
     "left": first1 
    }, "slow"); 
    $("table#agah2").animate({ 
     "left": first2 
    }, "slow"); 
} 

$(function() { 
    cyc = setInterval("slides1()", 3000); 
}); 

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

$(window).focus(function() { 
    jQuery.fx.off = false; 
    cyc = setInterval("slides1()", 3000); 
}); 
$(window).blur(function() { 
    jQuery.fx.off = true; 
    window.clearInterval(cyc); 
}); 

Answer 1

Новые версии JQuery использовать requestAnimationFrame обратные вызовы для обработки эффектов, а также браузеры не обрабатывают те, на скрытых вкладок.

А пока ваши setInterval события все еще происходят, в результате чего больше анимаций становится в очереди.

Вместо того чтобы использовать setInterval запланировать анимации, использовать «завершения обратного вызова» последней анимации для запуска следующего цикла, с setTimeout при необходимости.

function slides1() { 

    ... 

    $("table#agah1").animate({ 
     "left": first1 
    }, "slow"); 
    $("table#agah2").animate({ 
     "left": first2 
    }, "slow", function() { 
     setTimeout(slides1, 2000); // start again 2s after this finishes 
    }); 
} 

$(function() { 
    setTimeout(slides1, 3000); // nb: not "slides1()" 
}); 

Это гарантирует, что существует тесная связь между задержкой interanimation и самих анимаций, и избежать каких-либо проблем с setTimeout рассинхронизируются с анимацией.