Dual or Multiple Callback Design Pattern with JavaScript / jQuery

Question

I have a callback function that I'd like to execute after 2 separate $.getScript calls have successfully loaded.

I'm using the below design, but it feels messy, and the use of a named function feels very un-jQuery

var foo_ready = false;
var bar_ready = false;
var dual_callback = function(){
    if(foo_ready && bar_ready)
    {
        //do things
    }
};

 jQuery.getScript('/foo.js', function(){
        foo_ready = true;
        dual_callback();
    });
 jQuery.getScript('/bar.js', function(){
        bar_ready = true;
        dual_callback();
    });

Is there a better or more elegant way to do execute a single callback after multiple asynchronous calls have completed?

Answer 1

If you have jQuery 1.5.1 you can do this:

$.when( $.getScript('/foo.js'), $.getScript('/bar.js') ).done(function(){ 
     // this is called when both are done.
});

Check out the Deferred Object and $.when()