jquery wait for multiple complete events

Question

I want to use jQuery\'s load function to load some content into a div, and I want to also call jQuery\'s animate function.

$(\'#div         


        

Answer 1

You'll have to keep count of how many of your events have completed, and then use that as a test in your 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 2

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 3

Sounds like a job for 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 4

Use:

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

This way you can queue functions to execute one after the other.

Answer 5

Set a flag in LoadComplete and call your own 'allComplete' function. Set another flag in AnimateComplete and call that same 'allComplete' function.

In allComplete you check if both flags are set. If they are, both async functions are complete and you can call your third function.

Instead of setting flags (separate variables), you can also add 1 to a global counter, that way, you can increase the number of async functions to wait for without having to introduce extra flag variables.