JQuery callback and deferred object summary (Part 1) -- the magic then Method

What is a deferred object? To generate a deferred object, you only need to call jQuery. the Deferred function, deferred, is used to indicate the delay, the then method in the deferred object may be able to find this delayed behavior. This article focuses on interpreting the then method in the deferred object. Previous Article: jQuery callback and deferred object Summary (previous article) -- jQuery. callbacks Design Philosophy: In the deferred object structure, there are three groups of callback objects, each of which has the corresponding action (add listener ), and status (final state). These actions are classified into the method jQuery In the deferred object (trigger callback, add function to callback list medium. deferred construction Source Code except the then function source Code, the other is very simple, here do not explain too much, will focus on the then method View Code magic then method in the actual project application, I Pages may have multiple ajax requests. You may do this: $. ajax ({url1 ,...}); $. ajax ({url2 ,...}); $. ajax ({url3 ,...});... disadvantages: 1. sending multiple ajax requests at the same time may cause pressure on the server. For rich application pages, if there are too many requests, this is inevitable. 2. For the bottom of the page, in other words, the first screen does not display the ajax requests that need to be sent to the user. There is no need to let the user load the page before sending the requests, this will cause slow page response. The then method in the jQuery deferred object seems designed to solve the above problems. It can process multiple asynchronous requests in sequence, that is to say, after the first request is processed, the second request is processed, and so on. This reduces the pressure on the server and sends the first page (from top to bottom, make the page response faster to see a very elegant instance code var promiseA =$. get (urlA); promiseA. alway S (doneFnA, failFnA, progressFnA); var promiseB = promiseA. then (function () {return $. get (urlB) ;}); or you can write it like this, but it is not recommended: How does the Code above View Code run? First, send the first ajax request, after the promiseA object executes resolve (or reject or ject y), that is, after the first request succeeds or fails, the callback doneFnA (or failFnA and progressFnA) will be executed in sequence ), the anonymous function in then (pay attention to the code order. If the previous code order is incorrect, set promiseA. always has been modified after the then method is executed.) The second ajax request is sent in the anonymous function. After the request succeeds or fails, code var promiseA after the corresponding callback function (doneFnB, failFnB, progressFnB) is executed = $. Get (urlA); // Add the callback var promiseB = promiseA. then (function () {return $. get (urlB) ;}); // Add the callback var promiseC = promiseB here. then (function () {return $. get (urlC) ;}); // Add the callback var promiseD = promiseC. then (function () {return $. get (urlD) ;}); // Add the callback of promiseD here to check the construction source code in the then function. Through the above instance analysis, I believe you will suddenly realize that promise = {then: function (/* fnDone, fnFail, fnProgress */) {var fns = arguments; // The returned promise object corresponds to return jQuery. deferred (function (newDefer) {jQuery. each (tuples, function (I, tuple) {var action = tuple [0], fn = jQuery. isFunction (fns [I]) & fns [I]; // deferred [done | fail | progress] for forwarding actions to newDefer // Add callback deferred for the first deferred object [tuple [1] (function () {var returned = fn & fn. apply (this, arguments); // If the callback returns a deferred object, newDefer will return The status of the deferred object to trigger the action if (returned & jQuery. isFunction (returned. promise) {returned. promise (). done (newDefer. resolve ). fail (newDefer. reject ). progress (newDefer. notify);} // If the returned callback is not a deferred object, newDefer will) deferred object status to trigger behavior else {newDefer [action + "With"] (this === promise? NewDefer. promise (): this, fn? [Returned]: arguments) ;}}) ;}); fns = null ;}). promise ();}}