Accessing return values from multiple Deferreds

It’s been a while since I wrote my last posting. As I feel that I am constantly in a hurry I rarely manage to find some time *sigh*.

However, too many interesting stuff which is worth blogging keeps flooding our beloved tech world! One of those things is the new Deferred object in jQuery 1.5.

I won’t go into every detail about what Deferreds are for because Eric Hynds already wrote an awesome article about it.

Just to give an example: Some month ago, I asked on stackoverflow which was the best way to spin off several async calls and do something when all those async calls have completed. Well, that’s one of the things that Deferreds can solve.

Today I want to show you how to deal with that and also how to deal with it if each call returns a value which you need to have access to afterwards.

Let’s look at this code:

$(document).ready(function(){

    var example = function (){
        var deferred = $.Deferred();

        setTimeout(function(){
            deferred.resolve(5);
        }, 1000); //Will finish first

        return deferred.promise();
    };

    var example2 = function (){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve(10);
        }, 2000); //Will finish second

        return deferred.promise();
    };

    $.when(example(), example2())
        .then(function(arg1, arg2){
            console.log("Example1 (Should be 5): " + arg1);
            console.log("Example2 (Should be 10): " + arg2);
          });
    });

jsFiddle: http://jsfiddle.net/cburgdorf/M4JKR/

We created two Deferred objects (Example1, Example2) which both resolve with an return value. In the callback, which is called on $.then we have access to those return values. It might be obvious to you (but wasn’t to me) that those parameters will be sorted in the order in which the Deferreds were registered to $.when. That means, no matter in which order those async operations complete, you will be save to access the values in the expected order.

Here comes the proof with the operations turned around:

$(document).ready(function(){

    var example = function (){
        var deferred = $.Deferred();

        setTimeout(function(){
            deferred.resolve(5);
        }, 2000); //Will finish second

        return deferred.promise();
    };

    var example2 = function (){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve(10);
        }, 1000); //Will finish first

        return deferred.promise();
    };

    $.when(example(), example2())
        .then(function(arg1, arg2){
            console.log("Example1 (Should be 5): " + arg1);
            console.log("Example2 (Should be 10): " + arg2);
          });
    });

jsFiddle: http://jsfiddle.net/cburgdorf/vmLfF/

There is a lot more to discover with jQuery Deferreds, but I hope you found this little piece useful ;-)

About these ads

2 thoughts on “Accessing return values from multiple Deferreds

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s