Deferreds

Transcript

1. Embracing Async with Deferreds & promises Sebastian Porto @sebasporto
2. Let’s do greeting card
3. "OJNBUJPO
   
   "OJNBUJPO
   
   .VTJD
   
   .VTJD
   
   /FYU
   
4. Load animation! Load music! Show! Select ! animation! &! music! Knowing everything at the start
5. var assetsToLoad=2; loader.on(‘load’, function(){ assetsToLoad --; if(assetsToLoad===0) show(); }); loader.load(anim); loader.load(music); We can count
6. Use a lib (e.g. Async) async.parallel([ loadAnim, loadMusic, ], show); Check Async by the way
7. Async is nice and clean but…
8. "OJNBUJPO
   
   "OJNBUJPO
   
   .VTJD
   
   .VTJD
   
   
9. Load animation! Load music! Show! Select ! animation! Select ! music! Wait?! Incomplete information
10. Load animation! Load music! Show! Select ! animation! Incomplete information Select ! music!
11. function onVideoLoaded(){ checkIfAllLoaded(); } function checkIfAllLoaded(){ if(videoLoaded && musicLoaded && … ) show(); } We can count again or" use conditionals
12. Becomes hard to maintain very quickly
13. Deferreds to the rescue var def = $.Deferred(); def.done(function(val){ //… do something }); //… later def.resolve(val);
14. jQuery Deferreds" Underscore deferreds" PromisedIO" … many others"
15. They can be aggregated var def1 = $.Deferred(); var def2 = $.Deferred(); $.when(def1, def2).done(function(one, two){ //… do something with one and two; }); //… later def1.resolve(val); //… even later def2.resolve(val);
16. Load animation! Load music! Show! Select ! animation! Select ! music! To do this
17. var animDef = $.Deferred(); var musicDef = $.Deferred(); $.when(animDef, musicDef).done(function(){ show(); }); //when the music is loaded musicDef.resolve(); //when the animation is loaded animDef.resolve();
18. Load animation! Load music! Show! Select ! animation! Select ! music! Already resolved?
19. var animDef = $.Deferred(); var musicDef = $.Deferred(); //…later musicDef.resolve(); //…even later $.when(animDef, musicDef).done(function(){ show(); }); //No problem, still triggers, you cannot do that with event listeners!
20. Fail and reject var def = $.Deferred(); def .done(function(result){ //do something }) .fail(function(){ //fallback }); //…later, something bad happened def.reject();
21. Promises
22. Promises Loader function load(){ def = $.Deferred(); return def.promise(); } //..later function onLoad(){ def.resolve(); } Caller promise = loader.load(); promise.done(function(){ ..something }); //Cannot resolve here: //promise.resolve() not possible
23. Combine them to create bigger promises var promise1 = $.when(animDef, musDef); var promise2 = $.when(msgDef, bgDef); $.when(promise1, promise2).done(function(){ //… do something with anim, music message and background });
24. A! C! Result! B! F! D! E! G! H!