jquery Source parsing: jquery Deferred object deferred (tool method) 1

See the callback object for a lesson first. Deferred is a tool method that is added to jquery through extend. As shown below:

Jquery.extend ({

Deferred:function (func) {

},

When:function (Subordinate/*, ..., Subordinaten */) {

}
});

First, to introduce the use of the following deferred:

var cb = $. Deferred ();

SetTimeout (function () {

Alert (1);

Cb.resolve ();

},1000)

Cb.done (function () {

Alert (2);

});

The above code execution order: A new Delay object CB---SetTimeout, one second after the execution method pop-up 1--and execute the Cb.done method, put the pop-up 2 method to save a second after the execution of the pop-up 1 method, Pop 1, and then call Cb.resolve (), As soon as the Cb.resolve method is called, the pop-up 2 method is executed.

If you follow my course, you will find that it is very similar to callbacks. The above code can be implemented with callbacks:

var cb = $. Callbacks ();

SetTimeout (function () {

Alert (1);

Cb.fire ();

},1000)

Cb.add (function () {

Alert (2);

});

From the above: $. Callbacks () <-> $. Deferred (), Cb.fire () <-> cb.resolve ();, Cb.add <-> Cb.done.

Lingering objects are mainly used to deal with asynchronous situations, such as the above scenario, the first popup 1, and then pop 2,. But because the popup 1 requires an asynchronous operation (such as back to the AJAX request data), so you need to save the popup 2, and so on, after the completion of the AJAX request, Pop 1, and then execute the popup 2 method. Of course, you can also put the pop-up 2 method in the SetTimeout function, but in this case, in the complexity of business logic, the function inside the code will be very much, not easy to expand. As a result, deferred is used very much in Ajax.

Deferred has three sets of processing methods, above is the first set, it represents the completion, success, triggering.

The second set is: Represents unfinished, failed, triggered

$. Callbacks () <-> $. Deferred (), Cb.fire () <-> cb.reject ();, Cb.add <-> cb.fail.

The third set is: Trigger when

$. Callbacks () <-> $. Deferred (), Cb.fire () <-> cb.notify ();, Cb.add <-> cb.progress.

Examples of application of deferred in Ajax:

When we use Ajax normally, the following method is used, Ajax successfully calls the success method, fails, and then calls the error method.

$.ajax ({

URL: "xxx.php",

Success:function () {},

Error:function () {}

})

When you use lazy objects to manipulate Ajax, you only need to: done means success, fail represents failure

$.ajax (' xxx.php '). Done (function () {}). Fail (function () {});

When $.ajax is called, a deferred object is returned. When Ajax succeeds, the Resolve method is called, and the Reject method is called when it fails.

Next, analyze the source code:

Deferred:function (func) {
var tuples = [
["Resolve", "done", Jquery.callbacks ("Once Memory"), "resolved"],

　　　　The once representative executes only once, and the memory represents the added method of add after the fire call (which is not performed by default). All of this is written because success and failure only need to be triggered once, while in progress, it can always be triggered.
["Reject", "fail", Jquery.callbacks ("Once Memory"), "rejected"],
["Notify", "Progress", Jquery.callbacks ("Memory")]
],

......

Jquery.each (tuples, function (i, tuple) { //traversal of array, tuple is an array
var list = tuple[2], //jquery.callbacks (), returns a callback object
Statestring = tuple[3]; //"Resolved", "rejected", undefined

promise[tuple[1]] = List.add; ///Callback object's Add method.

　　　TUPLE[1]: "Done", "fail", "progress", used to add methods. Promise = {"Done": List.add, "fail": List.add, "Progress": List.add}

if (statestring) {The first two entries of the//tuples array enter the IF statement
List.add (function () {
state = statestring;

}, tuples[i ^ 1 [2].disable, tuples[2] [2].lock];
}

deferred[tuple[0]] = function () { //deferred = {"Resolve": function () {calls Deferred[resolvewith] (), is actually the callback object's Firewith method}, "Reject": function () {etc}, "notify": function () {etc}}
deferred[Tuple[0] + "with" (this = = = Deferred promise:this, arguments);
return this;
};
deferred[Tuple[0] + "with"] = List.firewith; ///Callback object's Firewith method is actually the fire method, because the fire method is called Firewith to operate the
});

......

}

The memory parameter of the deferred object to use the callback method is because the deferred object needs to be used to handle the persisted state, for example:

var cb = $. Deferred ();

SetTimeout (function () {

Alert (1);

Cb.resolve ();

},1000)

Cb.done (function () {

Alert (2);

});

$ ("Input"). Click (function () { //Click to eject immediately after 3

Cb.done (function () {

Alert (3);

})

})

The above code will pop up 1 and then pop up 2. After that, it stopped. Only when you click Input will the 3 pop up. Because the lingering object has a memory function, it uses a callback object with a memory parameter. When you click Input, the done method of the deferred object is called, and the Do method calls the Resolve method again, then fires, popping 3.

Come on!

jquery Source parsing: jquery Deferred object deferred (tool method) 1