Jquery/Javascript Deferred and Promise – Handling Asynchronous Execution

Jquery/Javascript Deferred and Promise – Handling Asynchronous Execution

As of Jquery 1.5 there is a new ways of handling asynchronous execution.

Firstly what is Asynchronous or Synchronous execution?
It simply terms when you execute something synchronously, you wait for it to finish before moving on to another task. When you execute something asynchronously, you can move on to another task before it finishes.

You probably have used this before when you $.ajax to send data to server and have a success: function(x) or error: function(x) which are both callback functions to ajax call.

Problem:-
When u nesting ajax callback with a another ajax callback.
Or try have a timeout to resolve a callback issues.

How do we manage this asynchronous transactions ?

It is the asynchronous way of not knowing when the callback will come back that have prompt jquery community to find better a ways to resolve this. Hence we have $.Deferred and Promise

Using $.Deferred and Promise is just better way to manage asynchronous transaction and keep your code more clean.

The only drawback is that it can take a while to get your head around the concepts.

At the heart of jQuery’s implementation is jQuery.Deferred — a chainable constructor which is able to create new deferred objects that can check for the existence of a promise to establish whether the object can be observed. It can also invoke callback queues and pass on the success of synchronous and asynchronous functions. It’s quite essential to note that the default state of any Deferred object is unresolved. Callbacks which may be added to it through .then() or .fail() are queued up and get executed later on in the process.

You are able to use Deferred objects in conjunction with the promise concept of when(), implemented in jQuery as $.when() to wait for all of the Deferred object’s requests to complete executing (i.e. for all of the promises to be fulfilled). In technical terms, $.when() is effectively a way to execute callbacks based on any number of promises that represent asynchronous events.

An example of $.when() accepting multiple arguments can be seen below in conjunction with .then():

 int res = (int)type1.InvokeMember("AddNumb", BindingFlags.InvokeMethod,null,
                                  obj, mParam);
//Here is the complete code:
using System;
using System.Reflection;

namespace Reflection
{
   class Class1
   {
    public int AddNumb(int numb1, int numb2)
    {
      int ans = numb1 + numb2;
      return ans;
    }

  [STAThread]
  static void Main(string[] args)
  {
     Type type1 = typeof(Class1); 
     //Create an instance of the type
     object obj = Activator.CreateInstance(type1);
     object[] mParam = new object[] {5, 10};
     //invoke AddMethod, passing in two parameters
     int res = (int)type1.InvokeMember("AddNumb", BindingFlags.InvokeMethod,
                                        null, obj, mParam);
     Console.Write("Result: {0} \n", res);
   }
  }
}

 

Some excellent materials on the internet which explain this is more details are at

  1. JavaScript Promises: Thinking Sync in an Async World
  2. Promises, Promises: Unlocking the Power of jQuery’s Deferreds – Brian Klaas
  3. How to Use Javascript Promises
  4. Examples from Jquery

Leave a Reply

Your email address will not be published. Required fields are marked *