JQuery Deferred usage Tips

Because of the project, I contacted the jquery deferred this magical tool, below I use a few examples, share my sentiment with you.

We have 5 time-consuming functions for FA, FB, FC, FD, FE our demand is FA and FB at the same time, FA and FB are executed, the implementation of FC and FD, where FC and FD as long as there is an execution, you can execute fE.

Complete the first step, write 5 functions, and add deferred

1 functionFA () {2         varDTD = $. Deferred ();3Console.log (' FA Start ');4SetTimeout (function(){5Console.log (' FA End ');6 dtd.resolve ();7}, 2000);8         returndtd.promise ();9     };Ten  One     functionFB () { A         varDTD = $. Deferred (); -Console.log (' fb Start '); -SetTimeout (function(){ theConsole.log (' fb End '); - dtd.resolve (); -              -}, 3000); +         returndtd.promise (); -     }; + /*** FC FD FE omitted ***/

The second step, FA and FB are all done, then xxx

First of all, given my approach, we need to use the $.when () function, first look at the effect

1     $.when (FA (), FB ()). Done (function() {2         console.log (' When FA, FB is solved '  ); 3     });

To open the console:

1 FA Start 2 FB Start 3 FA End 4 FB End 5 When FA, FB is solved

There is a question: what is $.when ()?

$.when (), give the address of the API document http://www.css88.com/jqapi-1.9/jQuery.when/

$.when () is to accept one or more deferred (deferred) objects as parameters, returning a deferred (deferred) object, and the state of the deferred object in the parameter becomes resolve. The status of the return value is set to resolve. In short, it is a strong multiple deferred callback, all successful, the call to a successful callback (Dtd.done ()) My understanding is a deferred asynchronous ' and gate ' switch.

Extension, can we do it ourselves $.when ()? According to the analysis I have tried, as follows:

1 $.extend ({2"Mywhen":function(){3         varargs =arguments;4         varDTD = $. Deferred ();5         varArglen =args.length;6         varSolvecount = 0;7 8         varArgsolve =function(){9             if(Solvecount >= (argLen-1)){Ten dtd.resolve (); One}Else{ Asolvecount++; -             } -         } the  -$.each (args,function(I_DTD, v_dtd) { - V_dtd.done (argsolve); -         }); +  -         returndtd.promise (); +     } A});

The call is also changed to our own method:

1 $.mywhen (FA (), FB ()). Done (function() {2        console.log (' When FA, FB is solved ' ); 3 });

To open the console:

FA startfb STARTFA endfb endwhen fa, FB is solved

It seems that our mywhen have succeeded. This is just the wheel we built to learn, the following example is still used $.when ()

The third step, while executing FC, FD, as long as there is a successful implementation of FE.

The question comes, $.when is with the door switch, then there is no or door switch? It seems that jquery is not ready. But we have the experience of making wheels above, and I believe it's easy to build a $.myatleast ()

1"Myatleast":function(){2         varargs =arguments;3         varDTD = $. Deferred ();4         varHasresolve =false;5         varSolve =function(){6             if(!hasresolve) {7 dtd.resolve ();8             }9         };Ten$.each (args,function(I_DTD, v_dtd) { One v_dtd.done (solve); A         }); -         returndtd.promise (); -}

Call to try:

1     $.when (FA (), FB ()). Done (function() {2         console.log (' When FA, FB have resolved '); 3         $.myatleast (FC (), FD ()). Done (function() {4             console.log (' FC or FD have resolved ' ); 5             FE (); 6         }); 7     });

To open the console:

1 FA Start2 FB Start3 FA End4 FB End5 When FA, FB have resolved6 FC Start7 FD Start8 FC End9 FC or FD has resolvedTen FE Start One FD End AFE End

We can see clearly that after FC end, Fe executes, and then FD ends.

In this context, we have implemented the requirements defined at the outset.

Write hastily, I hope you point out the wrong place in the article. Thank you!

JQuery Deferred usage Tips