JQuery deferred Study Notes

Introduced in jQuery1.5.0, jQuery changed ajax to implement the Deferred object. Is a chained object created by the jQuery. Deferred () method. $. Deferred is used everywhere in jQuery code (promise, DOM ready, Ajax, and Animation) features: Multiple callback functions can be added using the Deferred object; delay feature, register multiple callbacks into callback queues invoke callback queues relay the success or failure state of any synchronous or asynchronous function main source code jQuery1.9.1 source code: copy the code jQuery. extend ({Deferred: function (func) {var tuples = [// action, add listener, listener list, final state ["resolv E "," done ", jQuery. callbacks ("once memory"), "resolved"], ["reject", "fail", jQuery. callbacks ("once memory"), "rejected"], ["Y", "progress", jQuery. callbacks ("memory")], state = "pending", promise = {state: function (){.....}, always: function (){....}, then: function (/* fnDone, fnFail, fnProgress */){....}, // Get a promise for this deferred // If obj is provided, the promis E aspect is added to the object promise: function (obj ){.....}}, deferred ={}; // Keep pipe for back-compat promise. pipe = promise. then; // Add list-specific methods jQuery. each (tuples, function (I, tuple ){... deferred [tuple [0] + "With"] = list. fireWith;}); // Make the deferred a promise. promise (deferred); // Call given func if any if (func) {func. call (deferred, deferred );} // All done! Return deferred;}, // Deferred helper when: function (subordinate /*,..., subordinateN */){.... return deferred. promise () ;}}); the replication code Callbacks is the callback object of jQuery. It is used to add callback, delete callback, execute callback, and copy the code jQuery. callbacks = function (options) {// Actual Callbacks object self = {// Add a callback or a collection of callbacks to the list add: function (){...}, // Remove a callback from the list remove: function (){. ...},.... // Call all the callbacks with the given arguments fire: function () {self. fireWith (this, arguments); return this ;}, // To know if the callbacks have already been called at least once fired: function () {return !! Fired ;}}; return self ;}; copy the following two methods of the Code methods jQuery: $. deffered () -- create the Deffered object, var deferred = $. deffered (); $. when () -- specify a callback function for multiple operations. The Deffered object contains the following method: copy the code deferred. always () -- execute the callback function, whether the deffered object is in the State resolved or rejected (that is, whether the object succeeds or fails, it corresponds to the complete in ajax) (for details about the execution status, refer to the next chapter) deferred. done () -- when the Deferred object state is resolved, the callback function deferred is executed. fail () -- when the Deferred object state is rejected, the callback function deferred is executed. then () -- execute the callback function. The deferred object is either the State resolved or Rejected or in progress copy code deferred. isRejected () -- determines whether the status is rejected deferred. isResolved () -- determines whether the status is resolved deffered. state () -- judge the current state and copy the code deferred. promise () -- Return Deferred's promise object deferred. reject () -- reject a deferred object, which converts the state to rejected (with the given args .) deferred. rejectWith () -- difference from the above reject: with the given context and args. the following is similar to deferred. resolve () -- convert the status to resolve deferred. resolveWith () -- deferred. noti Fy () -- call the progressCallbacks deferred. policywith () -- copy the code deferred. pipe () -- filter parameters. Generally, done/resolve fail/reject progress/ject y corresponds to three execution states: resolved (completed), unfinished, and rejected (failed. if the execution status is resovled, the Deffered object immediately calls the callback function specified by the done () method. 2. if the execution status is rejected, the Deffered object immediately calls the callback function specified by the fail () method. 3. if the execution status is incomplete, the Deffered object will continue to wait or call the callback function ajax specified by the SS () method and simple chained operation eg: ajax method: Copy code $. ajax ("test. jsp "). success (funct Ion (result) {alert ("success! Data is: "+ result);}). error (function () {alert (" Error ")}). complete (function () {alert (" complete! ")}); Or: $. ajax ({url:" test. jsp ", success: function (result) {alert (" success! Data is: "+ result) ;}, error: function () {alert (" Error! ") ;}, Complete: function () {alert (" complete! ")},}); Copy the code using Deferred: Because $. ajax method and $. the get method returns the jqXHR object (derived from the Deferred object). Therefore, the above operations can be implemented in the following way. $. Ajax ("test. jsp"). done (function (result) {alert ("success! Data is: "+ result );}). fail (function () {alert ("Error ")}). always (function () {alert ("finished") ;}); Note: $. jqXHR in ajax. success (), jqXHR. error (), jqXHR. complete (), which has been deprecated in jquery 1.8, should use done (), fail () and always () done/resolve fail/reject progress/y done/resolve copy code var dfd = $. deferred (); dfd. done (function () {console. log ("##############")}; $ ("button "). on ("click", function () {dfd. resolve () ;}); click the copy code button to output ############## fail/reject copy code var dfd =$. deferred (); dfd. fail (function () {console. log ("##############")}; $ ("button "). on ("click", function () {dfd. reject () ;}); click the copy code button and output ############# progress/y eg1: copy the code var dfd =$. deferred (); dfd. progress (function () {console. log ("##############")}; $ ("button "). on ("click", function () {dfd. Y () ;}); copy the code and click the button to output ############# eg2: run the callback function using the interval y to copy the code var dfd =$. deferred (); dfd. progress (function () {console. log ("##############") ;}); $ ("button "). on ("click", function () {setInterval (function () {dfd. Y () ;}, 1000) ;}; copy the code and click the button, output once every 1 s ################ execute multiple callback functions eg1: copy the code $. ajax ("test. jsp "). done (function () {console. log ("the first callback ");}). done (function () {console. log ("the second callback ");}). done (function () {console. log ("the third callback ");}). fail (function () {console. log ("Error")}); or: $. ajax ("test. jsp "). success (function () {console. log ("the first callback ");}). success (function () {console. log ("the second callback ");}). success (function () {console. log ("the third callback ");}). error (function () {console. log ("Error")}); copy the code output: the first callbackthe second callbackthe third callback eg2: the done method of the deferred object is defined as follows: deferred. done (doneCallbacks [, doneCallbacks]) can pass in the array of functions success to achieve the same effect, but it is not recommended to use the copy Code if it is obsolete. ajax ("test. jsp "). done ([f1, f2, f3], [f2, f3]). done (function () {console. log ("the fourth callback ");}). fail (function () {alert ("Error")}); function f1 () {console. log ("the first callback");} function f2 () {console. log ("the second callback");} function f3 () {console. log ("the third callback");} copy the code output as follows: copy the Code the first callbackthe second callbackthe third callbackthe fourth callback copy code eg3: Use jQuery. deferred () creates a Deferred object. simply use the done method and the resolve Method to copy the code function f1 () {console. log ("the first callback");} function f2 () {console. log ("the second callback");} function f3 () {console. log ("the third callback");} var dfd = $. deferred (); dfd. done ([f1, f2, f3], [f2, f3]). done (function () {console. log ("finished") ;}); $ ("button "). on ("click", function () {dfd. resolve () ;}); copy the code and click the button. The output is as follows: copy the Code the first callbackthe second callbackthe third callbackfinished copy code eg4. add args copy code function f1 (arg) {console to resolve. log (arg + "the first callback");} function f2 (arg) {console. log (arg + "the second callback");} function f3 (arg) {console. log (arg + "the third callback");} var dfd = $. deferred (); dfd. done ([f1, f2, f3], [f2, f3]). done (function () {console. log ("finished ");}). always (function (arg) {console. log (arg + "end") ;}); $ ("button "). on ("click", function () {dfd. resolve ("##############") ;}); copy the code and output it as follows: copy the code ############## the first callback ############### the second callback ## ############ the third callback ############### the second callback ###### ######### the third callbackfinished ############### end copy code then and pipe use pipe to filter parameters, however, the pipe method has been enabled after jQuery 1.8. We recommend that you use the then pipe method to define it as deferred. pipe ([doneFilter] [, failFilter] [, progressFilter]) returns a new promise eg1: one-time definition of done fail and progress copy code function f1 () {console. log ('done');} function f2 () {console. log ('fail ');} function f3 () {console. log ('progress');} var deferred = $. deferred (); deferred. pipe (f1, f2, f3); $ ("button "). on ("click", function () {deferred. reject () ;}); copy the code and click the button to output fail. You can modify deferred as needed. reject is resolve or running y eg2: copy the code var dfd =$. deferred (); dfd. pipe (function (arg) {return "(* ^__ ^ *)" + arg;}); dfd. done (function (arg) {console. log (arg)}); $ ("button "). on ("click", function () {dfd. resolve ("##############") ;}); copy the code and click the button to output the result: (* ^__ ^ *) ############## eg3: copy the code var dfd =$. deferred (); argFilter = dfd. pipe (null, function (arg) {return "(* ^__ ^ *)" + arg;}); argFilter. fail (function (arg) {console. log (arg)}); $ ("button "). on ("click", function () {dfd. reject ("##############") ;}); copy the code output result to the same then deferred. then ([doneFilter] [, failFilter] [, progressFilter]) copies the code function f1 () {console. log ('done');} function f2 () {console. log ('fail ');} function f3 () {console. log ('progress');} var deferred = $. deferred (); deferred. then (f1, f2, f3); $ ("button "). on ("click", function () {deferred. reject () ;}); copy the code to the same effect as pipe when. Specify the callback function jQuery for multiple operations. when (deferreds); if a single deferred is passed in, the promise object is returned. You can add then and other methods in a chain. If multiple deferred are passed in, the new master deferred object is returned, the State of all the deferred objects in this object set. If all the deferred objects are resollve, the result is resolve. If one is reject, the result is reject eg1: $. when ($. ajax ("test. jsp ")). done (function () {console. result: GET http: // localhost: 8080/javascript/jQuery/test. jsp 200 OK 83 ms done eg2: copy the code function f1 () {console. log ('done');} function f2 () {console. log ('fail ');} function f3 () {console. log ('progress');} $. when ($. ajax ("test. jsp ")). then (f1, f2, f3); copy the code result to the same eg3: $. when ($. ajax ("test. jsp "), $. ajax ("demo. jsp ")). done (function () {console. result: GET http: // localhost: 8080/javascript/jQuery/test. jsp 200 OK 83 ms GET http: // localhost: 8080/javascript/jQuery/demo. jsp 200 OK 460 ms done eg4: copy the Code <style> div {height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090 ;} </style> <button> button </button> <div> </div> copy code copy code var effect = function () {return $ ("div "). fadeIn (800 ). delay( 1200 ). fadeOut () ;}; $ ("button "). on ("click", function () {$. when (effect ()). done (function () {console. log ("finished") ;}) ;}; copy the code 'effect () 'method and output finished ;. promise (). promise ([type] [, target]) return a promise object changes to The resolve State (. promise () method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended .) eg1: var button = $ ("<button>"); button. promise (). done (function (arg) {console. log (this = button & arg = button); // true}); eg2: copy the Code <style> div {height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090 ;} </style> <button> button </button> <div> </div> copy code copy code $ ("button "). on ("click", function () {$ ("div "). each (function (I) {$ (this ). fadeIn (). fadeOut (1000 * (I + 1) ;}$ ("div "). promise (). done (function () {console. log ("finished ");});});