jquery deferred objects using the detailed _jquery

This feature is important and the future will be the core approach to jquery, which radically changes how Ajax is used in jquery. To implement it, all of the Ajax code for jquery is rewritten.

However, it is more abstract, difficult for beginners to master, online tutorials are not many. So, I put my study notes sorted out, I hope to be useful to everyone.

This article is not a beginner's tutorial and is intended for developers who already have the experience of using jquery. If you want to learn about the basics of jquery, read the jquery design idea I wrote and jquery best practices.

One, what is the deferred object?

In the process of developing a Web site, we often experience some very lengthy javascript operations. There are both asynchronous operations (such as AJAX reading Server data), and synchronous operations (such as traversing a large array), none of which can immediately result.

A common workaround is to specify a callback function (callback) for them. That is, in advance, which functions should be called once they are finished.

However, in terms of callback functions, jquery has a very weak function. To change this, the jquery development team designed the deferred object.

simply put, the deferred object is the callback function solution for jquery. in English, defer means "delay", so the meaning of the deferred object is "delay" to a certain point in the future.

It solves the problem of how to handle time-consuming operations, provides better control over those operations, and a unified programming interface. Its main function can be summed up to four points. Here we go through the example code, step-by-step learning.

Second, the Ajax operation of the chain-type wording

The Ajax operation of jquery, the traditional writing is this:

$.ajax ({

URL: "Test.html",

Success:function () {
Alert ("Haha, success!") ");
},

Error:function () {
Alert ("Wrong!") ");
}

});

(Run code example 1)

In the above code, $.AJAX () accepts an object parameter that contains two methods: The Success method specifies the callback function after the operation succeeds, and the error method specifies the callback function after the operation fails.

After the $.ajax () operation is completed, if you are using jquery that is less than 1.5.0, the XHR object is returned and you cannot perform a chain operation; If the version is higher than 1.5.0, the deferred object is returned and can be chained.

Now, the new wording is this:

$.ajax ("test.html")

　　. Done (function () {alert ("Haha, success!") "); })

　　. Fail (function () {alert ("Error!) "); });

(Run code example 2)

As you can see, the done () equivalent to the Success method, fail () is equivalent to the error method. With the chain style, the readability of the code is greatly improved.

Three, specifying multiple callback functions for the same operation

One of the great benefits of deferred objects is that it allows you to add multiple callback functions freely.

Or take the above code as an example, if the Ajax operation succeeded, in addition to the original callback function, I would like to run a callback function, how to do?

It's simple, just add it to the back of the line.

$.ajax ("test.html")

. Done (function () {alert ("Haha, success!") ");} )

. Fail (function () {alert ("Error!) "); } )

　　. Done (function () {alert ("Second callback function!) ");} );

(Run code example 3)

The callback function can add as many as you want, and they are executed in the order of addition.

Specifying callback functions for multiple operations

Another great benefit of the deferred object is that it allows you to specify a callback function for multiple events, which is not possible with traditional writing.

Take a look at the code below, which uses a new method $.when ():

　　$.when ($.ajax ("test1.html"), $.ajax ("test2.html"))

. Done (function () {alert ("Haha, success!") "); })

. Fail (function () {alert ("Error!) "); });

(Run code example 4)

This code means that two operations $.ajax ("test1.html") and $.ajax ("test2.html") are executed first, and if successful, the done () specified callback function is executed, and if one fails or fails, the callback function specified by the fail () is performed.

Common Operation callback function interface (upper)

The great advantage of the deferred object is that it extends this set of callback function interfaces from Ajax operations to all operations. That is, any operation----either an AJAX or a local operation, whether asynchronous or synchronous----can use various methods of the deferred object to specify the callback function.

Let's look at a concrete example. Suppose there is a time-consuming operation wait:

var wait = function () {

var tasks = function () {

Alert ("Execution complete!") ");

};

SetTimeout (tasks,5000);

};

We specify a callback function for it, what should we do?

Naturally, you will think that you can use $.when ():

$.when (Wait ())

. Done (function () {alert ("Haha, success!") "); })

. Fail (function () {alert ("Error!) "); });

However, there is a problem. The $.when () parameter can only be a deferred object, so you must overwrite wait:

var DTD = $. Deferred (); Create a new Deferred object

var wait = function (DTD) {

var tasks = function () {

Alert ("Execution complete!") ");

　　　　　　dtd.resolve (); //Change the execution status of the deferred object

};

SetTimeout (tasks,5000);

　　　　return Dtd.promise ();

};

Here are two places to pay attention to.

First, the last line cannot return the DTD directly, and must return Dtd.promise (). The reason is that jquery states that any one of the deferred objects has three execution states----unfinished, completed, and failed. If the default execution status of Dtd,$.when () is returned directly, the following done () method is immediately triggered, which loses the function of the callback function. The purpose of dtd.promise () is to ensure that the current execution state----that is, "incomplete"----unchanged, so that the callback function is not triggered until the operation is complete.

Second, when the operation completes, the deferred object's execution state must be manually changed, otherwise the callback function cannot be triggered. The effect of Dtd.resolve () is to change the execution state of the DTD from incomplete to completed, triggering the Done () method.

Finally, remember that after you modify the wait, you must pass in the DTD parameter directly when you call.

$.when (Wait (DTD))

. Done (function () {alert ("Haha, success!") "); })

. Fail (function () {alert ("Error!) "); });

(Run code example 5)

Normal operation of the callback function interface (in)

In addition to using $.when () to add callback functions for normal operations, you can also use the constructor $ of the deferred object. Deferred ().

At this point, the wait function remains the same, and we pass it directly into $. Deferred ():

　　$. Deferred (Wait)

. Done (function () {alert ("Haha, success!") "); })

. Fail (function () {alert ("Error!) "); });

(Run code example 6)

jquery stipulates that $. Deferred () can accept a function as an argument, which will be in $. Deferred () executes before the result is returned. And, $. The Deferred object generated by Deferred () will be the default argument for this function.

Normal operation of the callback function interface (next)

In addition to the above two methods, we can also deploy the deferred interface directly on the wait object.

var DTD = $. Deferred (); Generating deferred objects

var wait = function (DTD) {

var tasks = function () {

Alert ("Execution complete!") ");

Dtd.resolve (); Change the execution state of a deferred object

};

SetTimeout (tasks,5000);

};

　　Dtd.promise (wait);

Wait.done (function () {alert ("Haha, success!") "); })

. Fail (function () {alert ("Error!) "); });

Wait (DTD);

(Run code example 7)

The key here is the dtd.promise (wait) line, which is the role of deploying the deferred interface on the wait object. It is because of this line that you can invoke the done () and fail () directly above the wait.

Viii. Summary: Methods of deferred objects

There are a number of ways to deferred objects, and here's a summary:

(1) $. Deferred () generates a Deferred object.

(2) Deferred.done () specifies the callback function when the operation succeeds

(3) Deferred.fail () specifies the callback function when the operation fails

(4) when deferred.promise () has no parameters, the effect is to keep the running state of the deferred object unchanged; When you accept the parameter, you deploy the deferred interface on the Parameter object.

(5) Deferred.resolve () manually change the running state of the deferred object to "completed", triggering the Done () method immediately.

(6) $.when () specifies a callback function for multiple operations.

In addition to these methods, the deferred object has three important methods, which are not covered in the tutorials above.

(7) Deferred.then ()

Sometimes for the sake of convenience, you can put the done () and fail () together to write, this is the then () method.

$.when ($.ajax ("/main.php"))

　　. Then (Successfunc, Failurefunc);

If then () has two parameters, the first parameter is the callback function of the Done () method, and the second parameter is the callback method of the Fail () method. If then () has only one parameter, then it is equivalent to done ().

(8) Deferred.reject ()

This method, in contrast to Deferred.resolve (), triggers the Fail () method immediately after the call changes the running state of the deferred object to "failed".

(9) Deferred.always ()

This method is also used to specify the callback function, and its function is to always execute regardless of whether the call is Deferred.resolve () or Deferred.reject ().

$.ajax ("test.html")

. Always (function () {alert ("Executed!"). ");} );

Finish