The $ in jquery. Deferred, $.when asynchronous operations

In the preface pages, there are often lengthy operations, such as AJAX request server data, that do not immediately result. If we need to do another operation after these operations are done, we need to put these actions in the callback function, $. Deferred is the jquery used to handle callback operations. The $ in jquery. Deferred to $. Callbacks very dependent and look at $. Callbacks executes the callback.

 1   $. Callbacks ();  2  setTimeout (function   () { 3  console.log (1); //  1  4  callbacks.fire (); //  5 }, 1000 6  callbacks.add (function   () { 7  console.log (2 8 }); 

$. Deferred to implement the above operation

1     var deferred = $. Deferred (); 2     SetTimeout (function() {3         //  14         Deferred.resolve (); // 2 5     }, (+); 6     Deferred.done (function() {7         console.log (2); 8     });

$. Deferred's three-team abstract 1, resolve-"done-" $. Callbacks (' Once Memory ')-"success-" only triggered once 2, reject-"fail-" $. Callbacks (' Once Memory ')-"failed-" only triggered once 3, notify-"progress-" $. Callbacks (' Memory ')-' notification-' continues to trigger until resolve or reject

1     varDeferred = $. Deferred ();2SetTimeout (function(){3         //deferred.resolve ();//Success4Deferred.reject ();//Error5         //deferred.notify ();//Progressing6}, 1000);7Deferred.done (function(){8Console.log (' Success ');9}). Fail (function(){TenConsole.log (' ERROR '); One}). Progress (function(){ AConsole.log (' progressing '); -});

Here is a more interesting usage: memory function.

1     varDeferred = $. Deferred ();2SetTimeout (function(){3Deferred.resolve ();//14}, 100);5Deferred.done (function(){6Console.log (1);7     });8$ (' #btn '). On (' click ',function () {9Deferred.done (function(){TenConsole.log (2);//2 ... just click the button once and it will fire once . One         }); A});

Deferred and promise $. Deferred will have two lingering objects, namely deferred and promise. Deferred contains all the methods, and promise does not contain three methods resolve, reject, notify that change the state of lingering objects. The advantage of this is that at some point, there is no way to change the state of the object, so as not to delay the object's state confusion.

1     functionfn () {2         varDeferred = $. Deferred ();3SetTimeout (function(){4Deferred.resolve ();//will not be triggered, the state has been modified externally. 5         });6         returndeferred;7     }8     varnewdeferred =fn ();9Newdeferred.done (function(){TenConsole.log (' Success '); One}). Fail (function(){ AConsole.log (' ERROR '); -     }); -Newdeferred.reject ();//Error

1     functionfn () {2         varDeferred = $. Deferred ();3SetTimeout (function(){4Deferred.resolve ();//Success5         });6         returndeferred.promise ();7     }8     varnewdeferred =fn ();9Newdeferred.done (function(){TenConsole.log (' Success '); One}). Fail (function(){ AConsole.log (' ERROR '); -     }); -Newdeferred.reject ();//error reject method does not exist

Other ways to introduce 1, state: Return the status of a lingering object pending: State resolved when creating an object: Callback succeeded-disables callbacks for failed and notify rejected: Callback failed-disables successful and notify Callback 2, Always: Regardless of success or failure will trigger 3, then: Pass three methods to handle three operations 4, Pipe: Delay object filter? Resolve, done, reject, fail, notify, progress

The $ in jquery. Deferred, $.when asynchronous operations