Embracing Async with Deferreds and Promises

Embracing Async with
Deferreds & promises

Sebastian Porto
@sebasporto

Animation 1 Music 1

Animation 2 Music 2

Next

Knowing everything at the start

Load animation!

Select !
animation!
&!
music ! Show !

Load music!

We can count

var assetsToLoad=2;

loader.on(‘load’, function(){
assetsToLoad --;
if(assetsToLoad===0) show();
});

loader.load(anim);
loader.load(music);

Use a lib (e.g. Async)

async.parallel([
loadAnim,
loadMusic,
], show);

Check Async by the way

Async is nice and clean but…

Animation 1 Music 1

Animation 2 Music 2

Incomplete information

Select !
Wait?! Load animation!
animation!

Show !
Select !
Load music!
music !

Incomplete information

Select !
Load animation!
animation!

Show !
Select !
Load music!
music !

We can count again or"
use conditionals

function onVideoLoaded(){
checkIfAllLoaded();
}

function checkIfAllLoaded(){
if(videoLoaded && musicLoaded && … )
show();
}

Becomes hard to maintain very
quickly

Deferreds to the rescue

var def = $.Deferred();

def.done(function(val){
//… do something
});

//… later
def.resolve(val);

jQuery Deferreds"
Underscore deferreds"
PromisedIO"
… many others"

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);

To do this

Select !
Load animation!
animation!

Show !
Select !
Load music!
music !

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();

Already resolved?

Select !
Load animation!
animation!

Show !
Select ! Load
music ! music !

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!

Fail and reject
var def = $.Deferred();

def
.done(function(result){
//do something
})
.fail(function(){
//fallback
});

//…later, something bad happened
def.reject();

Promises

Caller Loader
promise = loader.load(); function load(){
promise.done(function(){ def = $.Deferred();
..something return def.promise();
}); }

//Cannot resolve here:

//promise.resolve() not
possible
//..later
function onLoad(){
def.resolve();
}

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
});

A! F!

B!

Result !

C!
H!

D!

G!

E!

Embracing Async with Deferreds and Promises

Embracing Async with Deferreds and Promises

More Related Content

Similar to Embracing Async with Deferreds and Promises

Recently uploaded

Embracing Async with Deferreds and Promises