jQuery Deferred and Promises

As some of you may know I am mainly into WPF/WCF and that sort of stuff,
however I like to keep my toe in what is going on within the web world. A while
ago (a year I think) I worked with a collegue who was trying to create a TPL
like Task construct in Javascript that would support typical TPL things like

  • ContinueWith
  • Wait
  • Result
  • WhenAny

That sort of thing. I also recall he mentioned a JQuery feature called
“Deferred” and “Futures”. I must confess I did not think about this much over
the past year, until I overheard a new work collegue mention “Deferred” and
“Futures”, I thought mmmmm I really need to read up on that. So I did.

There is actually quit a lot out there on this subject, so what I present
here will hardly be cutting edge or novel, but if you have not heard of it before,
it
may at least spike your interest to learn more.

Before I show you a sample lets talk a bit about jQuery Deferred.

In jQuery a Deferred object is an asynchronous activity, which can signal the
success or failure of itself via registered callbacks. Since jQuery 1.5 the
inbuilt jQuery Ajax calls have been using Deferred objects.

You can read more about Deferred here :

http://api.jquery.com/category/deferred-object/
where we can use pipeline
functions such as

  • When
  • Then
  • Done

 

Which is great it means we can compose whole pipelines of these, and only
call a callback when a whole chain is “Done”, or carry on to do some other
thing.

But the true power (at least in my opinion) comes from the fact we can create
$.Deferred objects ourselves.

Here is a trivial example that does a jQuery Get call followed my a timeout
Deferred which I made up, and will only run the callback when both of these is
done.

(function ($) {

    doIt();

    // Jquery Ajax functions are already 
    // Deferred under the hood
    function getData() {
        return $.get('/Dummy.htm');
    }

    // This simple timout method shows how we can easily 
    //create our own deferred functions
    function timeout(x) {
        var dfd = $.Deferred();
        setTimeout(function () {
            dfd.resolve();
        }, x);
        return dfd.promise();
    }

    function doIt() {
        // Don't do anything until both the Ajax call and our 
        // custom Deferred complete
        $.when(getData(), timeout(2000))
        	.done(function (ajaxResult, timeOutResult) {
        	    $('#mainDiv').append(
        	    	'<br/><br/><strong>The animation AND the AJAX request are both done!</strong>');
        	    alert('AJax resultt is \r\n :' + ajaxResult);
        });
    }
})(jQuery);

The key parts you need to pay special attention to are

  • That we create a new Deferred object
  • We resolve the Deferred object when we do the actual work
  • And we return a Promise that we will do the work from the Deferred
    object

This is a very very simple example of using Deferred, but this could be used
for all sorts of novel things, such as :

  • Caching Ajax calls
  • Timeouts (ha ha)
  • Building complex chains of asynchronous functions
  • Commuination with a Web Worker

In fact if you want to see a great TPL/Deferred discussion you can look at
these excellent links:

  1. http://www.scottlogic.co.uk/2011/02/web-workers-part-2-using-jquery-deferred/

  2. http://www.scottlogic.co.uk/2011/02/web-workers-part-3-creating-a-generic-worker/

  3. http://www.scottlogic.co.uk/2011/02/web-workers-part-4-wrapping-it-up/

 

As always here is a small demo project (It is a VS2012 web app, just cos that
easiest for me to create this type of web project) :

https://dl.dropboxusercontent.com/u/2600965/Blogposts/2013/Deferred.zip

 

About these ads

2 thoughts on “jQuery Deferred and Promises

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