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?

PetersenDidIt · Accepted Answer · 2011-03-05 03:58:45Z

12

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()

answered Mar 5, 2011 at 3:58

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yahel Over a year ago

Very cool. +1. I hadn't read about $.when() yet; for my particular purposes, I don't have access to 1.5.1; I'm stuck in the doldrums of 1.4.2, for now ;)

Collectives™ on Stack Overflow

Dual or Multiple Callback Design Pattern with JavaScript / jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related