Monday, February 25, 2013

jQuery Deferred Object method chain or a Syntactic Sugar

The live samples:
Chain animation
Group async animation

Piece of code:

function doAnimation() {
  var duration = 2000;

  var host = jQuery(".host");
  var img = host.children();

  jQuery
    .when(img.fadeOut(duration))
    .then(function () {
      return host
        .delay(duration)
        .slideUp(duration)
        .delay(duration);
    })
    .then(function () {
      return host
        .delay(duration)
        .slideDown(duration);
    })
    .then(function () {
      return img
        .delay(duration)
        .fadeIn(duration)
        .delay(duration);
    })
    .then(function () {
      // it3xl.com: !The Recursion.
      doAnimation();
    })
    ;
}


I have the next thoughts.

Prerequisites

1.
The Deprecated and The Removed
Let's omit all deprecated and removed functions, parameters, objects etс.
See the documentation and be aware of it.
Current version of the jQuery is the 1.9.1.

2.
The Deferred is everywhere in the jQuery by the Promise proxy.
Almost every object in jQuery now may be treated like a Deferred object out of the box.
Except for the jQuery itself.
It works by the promise method of objects that returns Deferred's Promise object.

By default, the Promise object is linked to a Deferred object.
If your object isn't the Deferred object it will be behave like a Deferred object with the "resolved" state on start.
If your object hasn't the promise method, it may be attached to any Deferred object by means of its promise method.
jQuery.Deferred().promise(yourObject) fot instants.

The Promise exposes only the Deferred's methods needed to attach additional handlers or determine the state (then, done, fail, always, progress, and state), but not ones that change the state (resolve, reject, notify, resolveWith, rejectWith, and notifyWith).

I say the Deferred means I see a Promise. I see a Promise means I think the Deferred.

3.
The Deferred object may accumulate other deferred objects.
var accumulatedDeferred = jQuery.when(
    deferred_1
    , deferred_2
    , yourPlainObject
    , anyObject
);
You see, it works with accordance to the prerequisite number 2 above for not-Deferred objects.
Or so:
//...
    .then(function () {
      var hostPromise = host
        .slideUp(duration)
        .delay(duration);

      var imgPromise = img
        .fadeIn(duration)
        .delay(duration);

      return jQuery.when(hostPromise, imgPromise);
    })
    .then(function () {
//...


Let's do it now:

Deferred Syntactic sugar
or
The Deferred method chain

The key role of the "then" and the "return" for creation of the Deferred method chain.

The then method is not as the same as the donefail or always methods if its function-filters returns a Deferred, Promise or any object (with the promise method or not).
The then method returns new chainable Deferred (Promise) object if you return it.
But the donefail and always methods ignore the return instruction and always return the same Deferred object.

As a result we may create a Deferred chain like at the first example of this article.

You may look on the Deferred Object like on a simple code-Workflow.

No comments:

Post a Comment