Click here to Skip to main content
13,143,459 members (33,387 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 4 Mar 2014

jQuery Deferred and Promises

, 4 Mar 2014
Rate this:
Please Sign up or sign in to vote.
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 colleague 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 colleague mention “Deferred” and
“Futures”, I thought mmmmm, I really need to read up on that. So I did.

There is actually quite 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, let's 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 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 that we can create $.Deferred objects ourselves.

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

(function ($) {


    // 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 () {
        }, 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) {
        	    	<strong>The animation AND the AJAX request are both done!</strong>');
        	    alert('AJax result is \r\n :' + ajaxResult);

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
  • Communication with a Web Worker

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


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sacha Barber
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.


I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170915.1 | Last Updated 5 Mar 2014
Article Copyright 2014 by Sacha Barber
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid