How to use deferred objects in jquery _javascript tips

In the jquery1.5 version, a deferred object, a deferred object, is added to handle the callback function that occurs at a future point in time. Also, the Ajax method is rewritten, and the Ajax method now returns a deferred object.
Let's take a look at the usage of the deferred object.
chain callback for 1.ajax

The Ajax method returns a deferred object that can be written directly using the
$.ajax (' Test.json '). Done (function (RESP) {
 //done equivalent to success callback, Where the default parameter is the parameter
 alert (' success ') of the success callback;
Fail (function () {
 //fail equals error callback
 alert (' Error ');
});

You can also write multiple callbacks at the same time, which are sequentially executed in sequence

$.ajax (' Test.json '). Done (the function (RESP) {
 //done corresponds to the success callback, where the default parameter is the parameter
 alert (' success ') of the success callback;
}). Done (function () {
 //do something ...
}). Done (function () {
 //do something ...
});

Deferred object also has a then method, in fact it is an integrated done and fail method, it accepts one or two parameters, if there are two parameters, then the first is the done method of the callback function, the second is the fail method of the callback function. If there is only one argument, it is the callback function of the Done method.

var success = function () {
 alert (' success ');

var error = function () {
 alert (' Error ');

Two parameters
$.ajax (' Test.json '). Then (success, error);

A parameter
$.ajax (' Test.json '). Then (success);

jquery also provides a $.when (Deferreds) method to execute a callback function for one or more deferred objects, and when its arguments are deferred, it executes the corresponding callback function after the asynchronous execution of all deferred objects.

$.when ($.ajax (' Test.json '), $.ajax (' Demo.json '). Done (function () {
 alert (' success '); 
}). Fail (function () {
 alert (' Error ');
});

It is well understood that the callback in the Done method is executed only if all asynchrony succeeds, otherwise the callback in the Fail method is executed, which is equally well understood. The default number of parameters for a callback function in the Done method is the same as when method parameters.
The callback in the done method is executed immediately if the When method passes in only the normal object, not the deferred object, and the default parameter of the callback function is the object itself that is passed in the When method.

 $.when ({test: ' Test '} ') when the argument passed in the When method is just a normal object
. Done (function (resp) {
 console.log (resp.test);//' Test ' 
}). Fail (function () {
 //Because the incoming object is not a deferred object, the callback in fail is not invoked 
}) 

When you need two or more asynchronous end to call the callback function, while these asynchronous Ajax may also need to modify the transmission mode type or data transfer, the code is very messy and very readable.
So you can encapsulate Ajax and improve the readability of your code.

var ajax = function (URL, type, param) {return
 $.ajax ({
 url:url,
 type:type,
 data:param | | {} 
 }); 
};

Ajax (' Test.json '). Done (function (RESP) {
 alert (' success ');
}). Fail (function () {
 alert (' Error ');
});

A always () method, which is also a callback function, differs from done and fail in that the callback in the Always method is executed in any case.
Not only can the deferred object be used in jquery's AJAX approach, he provides a series of interfaces that make it much more versatile.
For example, there is a time consuming method

 function A () {
 function B () {
 alert (' Start ');
 } 
 SetTimeout (b, 3000); 
 

If you want to perform a callback after this method, you cannot use $.when () because when the $.when () parameter is not a deferred object, it will call the done or always callback function directly.
This is the time to use the other methods of the deferred object, or the above method, do some rewriting

function A () {
 var def = $. Deferred (); Create deferred object 
 function B () {
 alert (' Start ');
 Def.resolve (); Change the state of the deferred object
 } 
 settimeout (b, 3000); 
 return def;
}

$.when (A ()). Done (function () {
 alert ("It s Callback");

Analyze:
1). $. The Deferred () method creates a Deferred object
2). Def.resolve () will change the state of the deferred object, deferred object has three states, unfinished, successful, failed.
It has resolve () and reject () two methods, resolve method can change the object state to success, reject method can change state to fail.
There is a problem with the above wording, the returned deferred object can be externally changed state, so also provides a promise () method, this method will be based on deferred object to return a new deferred object, the difference is, The returned object has only one observable state, not a method that can change its state, similar to returning a read-only deferred object.
So the same example can be rewritten as this

function A () {
 var def = $. Deferred (); Create deferred object 
 function B () {
 alert (' Start ');
 Def.resolve (); Change the state of the deferred object
 } 
 settimeout (b, 3000); 
 return Def.promise ();
}

$.when (A (). Reject ()). Done (function () {//Reject () method Invalid
 alert ("It's Callback");
});

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.