jQuery Deferred Object method chain or a Syntactic Sugar
The live samples:
Chain animation
Group async animation
Piece of code:
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.
Or so:
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 done, fail 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 done, fail 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.
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.ru: !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 done, fail 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 done, fail 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.
Comments
Post a Comment