Javascript · JQuery

when() working with jQuery promise() then() it is probably deferred

Overview
Asynchronous calls are very useful in UI programming as it does not block the interface. We can use callback methods to execute code when the asynchronous calls are completed. This is all well and good, however, chaining more than a few callbacks will render your code near obfuscated.

Here comes Deferred to save the day.

The Deferred object, introduced in jQuery 1.5, is a chainable utility object created by calling the jQuery.Deferred() method. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

Creating a Deferred function
The function below creates a new Deferred function that returns the promise which can then be chained. This examples uses setTimeout to simulate a lengthy process, but it can be any process. Note that resolve() is called when the process is completed. You can also pass data into resolve() which can be passed along using when().

Any error can be handled by using reject([args]) function.

function aNewDeferred() {
  var d = new $.Deferred();
  setTimeout(function() {
     d.resolve(“complete”);
    }, 1000);
  return d.promise();
}

then() what?
After we have a Deferred function, then we can chain things together. Take the example below.

aNewDeferred().then(successCallback, failCallback);

or

aNewDeferred()
  .then(
    function(value) { 
      alert(value);
    }, 
    function(error) {
      alert(error);
    });

jQuery.ajax() is promise()ing
jQuery.ajax() requests implement Promise interface, this means we can then chain ajax calls like Deferred.

Normally an AJAX call will have a success and error callback. However, you can also just return the ajax as promise and specify the success and error handlers with Deferred then(), done() and fail().

function anAjaxCall() {
  return $.ajax(
    url: serviceUrl,
    datatype: “jsonp”
  );
}

when() all then() is done()
when() provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

then() adds handlers to be called when the Deferred object is resolved, rejected, or still in progress.

done() adds handlers to be called when the Deferred object is resolved.

$.when(anAjaxCall, aNewDeferred)
  .then(function(ajaxResult, newDeferredResult)
    {
      alert(ajaxResult + newDeferredResult);
    })
  .done(function() {
      alert(“hooray”);
    });

Summary
Overall, jQuery Deferred makes asynchronous event chaining a lot more readable and maintainable. I have had good success using jQuery.Deferred(). Please share your experience and opinion if you have used jQuery.Deferred() or any alternatives.

Read more about jQuery Deferred object https://api.jquery.com/category/deferred-object/.

Cheers – Sy

Advertisements

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