Embracing Async with Deferreds and Promises
-
Upload
sebasporto -
Category
Technology
-
view
1.044 -
download
1
Transcript of Embracing Async with Deferreds and Promises
![Page 1: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/1.jpg)
Embracing Async with Deferreds & promises
Sebastian Porto@sebasporto
![Page 2: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/2.jpg)
Let’s do greeting card
![Page 3: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/3.jpg)
Animation 1
Animation 2
Music 1
Music 2
Next
![Page 4: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/4.jpg)
Load animation !
Load music !
Show !
Select !animation !
& !music !
Knowing everything at the start
![Page 5: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/5.jpg)
var assetsToLoad=2;loader.on(‘load’, function(){
assetsToLoad --;if(assetsToLoad===0) show();
});loader.load(anim);loader.load(music);
We can count
![Page 6: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/6.jpg)
Use a lib (e.g. Async)
async.parallel([
loadAnim,loadMusic,
], show);
Check Async by the way
![Page 7: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/7.jpg)
Async is nice and clean but…
![Page 8: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/8.jpg)
Animation 1
Animation 2
Music 1
Music 2
![Page 9: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/9.jpg)
Load animation !
Load music !
Show !
Select !animation !
Select !music !
Wait? !
Incomplete information
![Page 10: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/10.jpg)
Load animation !
Load music !
Show !
Select !animation !
Incomplete information
Select !music !
![Page 11: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/11.jpg)
function onVideoLoaded(){checkIfAllLoaded();
}function checkIfAllLoaded(){
if(videoLoaded && musicLoaded && … ) show();}
We can count again or"use conditionals
![Page 12: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/12.jpg)
Becomes hard to maintain very quickly
![Page 13: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/13.jpg)
Deferreds to the rescue
var def = $.Deferred();def.done(function(val){
//… do something});//… laterdef.resolve(val);
![Page 14: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/14.jpg)
jQuery Deferreds"Underscore deferreds"
PromisedIO"… many others"
![Page 15: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/15.jpg)
They can be aggregated
var def1 = $.Deferred();var def2 = $.Deferred();$.when(def1, def2).done(function(one, two){
//… do something with one and two;});//… laterdef1.resolve(val);//… even laterdef2.resolve(val);
![Page 16: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/16.jpg)
Load animation !
Load music !
Show !
Select !animation !
Select !music !
To do this
![Page 17: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/17.jpg)
var animDef = $.Deferred();var musicDef = $.Deferred();$.when(animDef, musicDef).done(function(){
show(); });//when the music is loadedmusicDef.resolve();//when the animation is loadedanimDef.resolve();
![Page 18: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/18.jpg)
Load animation !
Load music !
Show !
Select !animation !
Select !music !
Already resolved?
![Page 19: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/19.jpg)
var animDef = $.Deferred();var musicDef = $.Deferred();//…latermusicDef.resolve();//…even later$.when(animDef, musicDef).done(function(){
show(); });//No problem, still triggers, you cannot do that with event listeners!
![Page 20: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/20.jpg)
Fail and reject
var def = $.Deferred();def
.done(function(result){ //do something}).fail(function(){ //fallback});
//…later, something bad happeneddef.reject();
![Page 21: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/21.jpg)
Promises
![Page 22: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/22.jpg)
Promises
Loaderfunction load(){
def = $.Deferred();return def.promise();
}//..laterfunction onLoad(){
def.resolve();}
Callerpromise = loader.load();promise.done(function(){
..something});//Cannot resolve here://promise.resolve() not possible
![Page 23: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/23.jpg)
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});
![Page 24: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/24.jpg)
A !
C !
Result !
B !
F !
D !
E !
G !
H !
![Page 25: Embracing Async with Deferreds and Promises](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a86da41a28abd75f8b45d9/html5/thumbnails/25.jpg)