Regarding this jsFiddle, I am trying to dynamically add a "deferred" which is created when an event triggers, so the done callback is only called when all deferred are resolved, including those added later:
Relevant code:
var promises = [ deferred1, ... ];
var p = when.all(promises).then(function() {
console.log('All done!!');
//! trigger
});
promises.push( deferredFromEvent ); // << ignored
update: suggestions using Q or jQuery are welcome, I am looking for one that works
Treat your fixed promises as a separate bundle than the dynamic one(s).
Wait on the bundled promises and then pipe their combined outcome through a $.when() on an initially empty array. You can dynamically push new promises into this array any time.
http://jsfiddle.net/atesgoral/YVkVa/1/
HTML:
<p>You have 5 seconds to inject!</p>
<button id="inject">Inject Deferred 3</button>
<button id="resolve">Resolve Deferred 3</button>
<p>Deferred 1: <span id="dfd1">pending<span></p>
<p>Deferred 2: <span id="dfd2">pending<span></p>
<p>Deferred 3: <span id="dfd3">pending<span></p>
<h1 id="result"></h1>
JavaScript:
var dfd1 = $.Deferred(),
dfd2 = $.Deferred(),
fixed = [ dfd1.promise(), dfd2.promise() ],
multiplexed = $.when.apply($, fixed), // Bundle the fixed ones
reservoir = []; // Reservoir for dynamic promises
// The solution to your problem lies here. The rest is scaffolding.
var ultimate = multiplexed.pipe(function () {
return $.when.apply($, reservoir);
});
ultimate.done(function() {
$("#result").text("Done!");
});
window.setTimeout(function () {
dfd1.resolve();
$("#dfd1").text("resolved");
}, 2500);
window.setTimeout(function () {
dfd2.resolve();
$("#dfd2").text("resolved");
}, 5000);
var dfd3 = $.Deferred();
$("#inject").click(function () {
reservoir.push(dfd3.promise());
});
$("#resolve").click(function () {
dfd3.resolve();
$("#dfd3").text("resolved");
});
Create all of your promises that you know you need up-front. Build a .when with them. Save the promise returned from the .when. As you add new events, which require new promises, add new .whens, using the promise from previous .whens, plus whatever new promises you've completed.
Your application will have multiple single points of failure, if you're using the final .when as your "Go ahead with the app.". IE: if any one promise fails at any point, then any .when created after that is also going to fail.
...but if that's your intent, or you've got some solid error-handling, it should do you.
I'm trying to keep this library-agnostic -- usually, I use my own implementation, which is half-way between something jQuery does, and something that Crockford did in a recent talk, but if we assume that:
functions return promise-handlers
"when" returns a promise-handler
promise-handlers have at least a .done and .fail -- or accept two arguments, or whatever
and whatever happens inside of a function will control whether the promise is rejected/resolved or kept/broken (or whatever), then you might end up with a bunch of functionality that looks like:
var doing = doSomething(), // returns promise
making = makeSomething(), // returns promise
loading = loadSomething(), // returns promise
dependencies_lvl_1 = when(doing, making, loading);
Later on, you might add a new module or widget -- maybe it saves some work:
var saving = saveSomething(), //returns promise
dependencies_lvl_2 = when(dependencies_lvl_1, saving);
Maybe after that, you need to switch pages, but you need your data to cache first
var caching = cacheData(), // returns promise
when(dependencies_lvl_2, caching)
.done(goToNextPage)
.fail(handleError);
If you look at it, you know for a fact that as long as when returns a promise which only succeeds if all promises are kept (and when all promises are kept), and none of them broke, then dependencies_lvl_2 there, includes all dependencies from dependencies_lvl_1, plus additional promises.
The level-3 .when, then, has a resolution depending on every single thing which has been added to the chain.
And as long as you keep caching your promises into variables (or some sort of future-access), you can keep chaining these together, into eternity.
"... so the done callback is only called when all deferred are resolved, including those added later" makes no sense, however I think I know what you mean.
If I understand correctly then you want what might be termed a "re-firable when()" - something like this (based on jQuery) :
function PromiseSet(memory, once) {//javascript Constructor
var flags = [];
if(memory) flags.push('memory');
if(once) flags.push('once');
var promises = [],
doneCallbacks = $.Callbacks(flags.join(' ')),
failCallbacks = $.Callbacks(flags.join(' '));
this.add = function(promise, val) {
promises.push(promise);
if(val) { this.fire(val); }
return this;
};
this.done = function(fn) {
doneCallbacks.add(fn);
return this;
};
this.fail = function(fn) {
failCallbacks.add(fn);
return this;
};
this.fire = function(val) {
val = val || null;
$.when.apply($, promises).then(
function() { doneCallbacks.fire(val); },
function() { failCallbacks.fire(val); }
);
return this;
};
return this;
}
untested
All methods return this to make them chainable.
If I've written the constructor correctly, then you can control its detailed behaviour by passing booleans to new PromiseSet(). For your propised usage, I think you need to pass (true, false), but try other settings to see what happens.
Sample sequence :
var myPromiseSet = new PromiseSet(true, false);
myPromiseSet.add(promise1);
myPromiseSet.add(promise2).add(promise3);
myPromiseSet.done(myDoneFunction).fail(myFailFunction);
myPromiseSet.fire("foo");
myPromiseSet.add(promise4).fire();
Take a look to this solution. By this implementation you able to track a lot of dinamic added promises. If you are using jQuery Deferred you could do this way. jsFiddle
note that I've used _.every method from lodash library, so you'll need to install lodash too
function doAlotOfAsyncThings(callback) {
var promises = [];
var def = $.Deferred();
console.log('Adding first promise');
promises.push(def.promise());
setTimeout(function() {
// Dinamically adding second promise. Important note: last added promise must be added to array BEFORE previous promise has been resolved
var def2 = $.Deferred();
var def3 = $.Deferred();
console.log('Dinamically adding second and third promises');
promises.push(def2.promise());
promises.push(def3.promise());
console.log('Resolving first promise');
def.resolve();
setTimeout(function() {
console.log('Resolving second and third promises');
def2.resolve();
def3.resolve();
}, 1500);
}, 1000);
function checkAllDone() {
console.log('Checking $.when');
$.when.apply(null, promises).then(function() {
// we have to check state of every promise in array
var all_resolved = _.every(promises, function(elem) { return elem.state() == 'resolved'; });
if(all_resolved) {
console.log('All promises are resolved! callback();')
callback();
} else {
console.log('Hm, seems that some promises were dinamically added, waiting for them..');
checkAllDone();
}
});
}
checkAllDone();
}
doAlotOfAsyncThings(function(){
console.log('Done');
});
With Q.js it's even shorter.
In this solution I use _.any method from lodash library
function doAlotOfAsyncThings(callback) {
var promises = [];
var def = Q.defer();
console.log('Adding first promise');
promises.push(def.promise);
setTimeout(function() {
// Dinamically adding second promise. Important note: last added promise must be added to array BEFORE previous promise has been resolved
var def2 = Q.defer();
var def3 = Q.defer();
console.log('Dinamically adding second and third promises');
promises.push(def2.promise);
promises.push(def3.promise);
console.log('Resolving first promise');
def.resolve();
setTimeout(function() {
console.log('Resolving second and third promises');
def2.resolve();
def3.resolve();
}, 1500);
}, 1000);
function checkAllDone() {
console.log('Checking $.when');
Q.all(promises).then(function() {
// Q remove resolved promises from array so we have to check if array contains some non-undefined elements (those elements would be non-resolved dinamically added promises)
if(_.any(promises)) {
console.log('Hm, seems that some promises were dinamically added, waiting for them..');
checkAllDone();
} else {
console.log('All promises are resolved! callback();')
callback();
}
});
}
checkAllDone();
}
doAlotOfAsyncThings(function(){
console.log('Done');
});
