jquery attendere più eventi completi

Question

Desidero utilizzare la funzione load di jQuery per caricare alcuni contenuti in un div e voglio anche chiamare la funzione animate di jQuery.

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

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

Non voglio aspettare che load completare prima di chiamare animate o viceversa.

In seguito, desidero chiamare una terza funzione, ma non desidero richiamarla fino a quando non è stato attivato l'evento completo sia per load sia per animate.

Come posso fare questo?

Answer 1

Suona come un lavoro per 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

Impostare un flag in LoadComplete e chiamare la propria funzione 'allComplete'. Imposta un altro flag in AnimateComplete e chiama la stessa funzione 'allComplete'.

In tuttoCompleto si controlla se entrambi i flag sono impostati. Se lo sono, entrambe le funzioni asincrone sono complete e puoi chiamare la terza funzione.

Invece di impostare flag (variabili separate), è possibile anche aggiungere 1 a un contatore globale, in questo modo, è possibile aumentare il numero di funzioni asincrone da attendere senza dover introdurre variabili di flag aggiuntive.

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

Dovrete tenere il conto di quanti dei vostri eventi hanno completato, e quindi utilizzare che come un test nel vostro 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

Usa:

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

In questo modo è possibile mettere in coda le funzioni per eseguirne una dopo l'altra.