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.

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

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

I don't want to wait for load to complete before calling animate or vice versa.

Following this I want to call a third function, but I don't want to call it until the complete event for both the load and the animate have been fired.

How can I do this?

Solution 1

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!
});

Solution 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();
});

Solution 3

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
}

Solution 4

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.

Solution 5

Use:

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

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

View more solutions