jquery czekać na wiele kompletnych zdarzeń

Question

Chcę użyć funkcji jQuery's load do załadowania niektórych treści do div, i chcę również wywołać funkcję jQuery's animate.

$('#div1').load('...', function() { 
    // load complete 
}); 

$('html,body').animate({ 
    ...: ...}, ..., '...', function(){ 
    // animate complete 
}); 

Nie chcę czekać na load aby zakończyć przed wywołaniem animate lub odwrotnie.

W następstwie tego chcę wywołać trzecią funkcję, ale nie chcę jej wywoływać, dopóki nie zostanie wyzwolone całe zdarzenie zarówno dla load, jak i dla animate.

Jak mogę to zrobić?

Answer 1

Brzmi jak zadanie dla Deferred: http://api.jquery.com/category/deferred-object/

var load = $.Deferred(function (dfd) { 
    $('#div1').load(…, dfd.resolve); 
}).promise(); 

var animate = $('html,body').animate(…); 

$.when(load, animate).then(function() { 
    // Do your thing here! 
}); 

Answer 2

Ustaw flagę w LoadComplete i wywołaj własną funkcję "allComplete". Ustaw inną flagę w aplikacji AnimateComplete i wywołaj tę samą funkcję "allComplete".

W allComplete sprawdzasz, czy obie flagi są ustawione. Jeśli tak, obie funkcje asynchroniczne są kompletne i możesz wywołać trzecią funkcję.

Zamiast ustawiać flagi (oddzielne zmienne), można również dodać 1 do licznika globalnego, dzięki czemu można zwiększyć liczbę funkcji asynchronicznych, na które można czekać bez konieczności wprowadzania dodatkowych zmiennych flag.

Answer 3

var _loadComplete = false; 
var _animateComplete = false; 

$('#div1').load('...', function() { 
    // load complete 
    _loadComplete = true; 
    checkComplete(); 
}); 

$('html,body').animate({ 
    ...: ...}, ..., '...', function(){ 
    // animate complete 
    _animateComplete = true; 
    checkComplete(); 
}); 

function checkComplete() { 
    if(_loadComplete && _animateComplete) 
     runThirdFunction(); 
}); 

Answer 4

Musisz zachować rachubę ilu imprezach zakończyły, a następnie użyć jej jako test w swojej callback:

var complete = 0; 

$('#div1').load('...', function() { 
    complete++; 
    callback(); 
}); 
$('html,body').animate({ 
    ...: ...}, ..., '...', function(){ 
    complete++; 
    callback(); 
}); 

function callback(){ 
    if (complete < 2) return; 
    // both are complete 
} 

Answer 5

Zastosowanie:

$('#div1').queue(function(){ /* do stuff */ }); 

W ten sposób możesz kolejkować funkcje, aby wykonać jedną po drugiej.