Javascript - too much recursion when executing long chain of promises

You can make use of jQuery.when ~ although it might be a little bit mad passing in over 200 arguments:

http://jsfiddle.net/6j6em/1/

The code from the fiddle

JavaScript with jQuery

var resolves = []; function log(msg){ $('#log').append('<div><small>' + msg + '</small></div>'); } function someTask(i){ var dfd = new $.Deferred(); log('created task '+i); resolves.push(function(){ log('resolved task '+i); dfd.resolve(); }); return dfd.promise(); } $(function(){ $('#resolve1').click(function(){ for ( var i=0; i<resolves.length; i++ ) { resolves[i](); } }); $('#resolve2').click(function(){ for ( var i=0; i<resolves.length; i++ ) { if ( i == 5 ) continue; resolves[i](); } }); $('#resolve3').click(function(){ resolves[5](); }); var i, queue = []; for(i=0; i<200; ++i){ queue.push(someTask(i)); } (jQuery.when.apply(jQuery, queue)) .done(function(){ log('all resolved!'); alert('all resolved!'); }) ; }); 

Markup for this example

<button id="resolve1">Resolve all</button> &nbsp;&nbsp; <button id="resolve2">Resolve (all but one)</button> <button id="resolve3">Resolve (the remaining one)</button> <div id="log"></div> 

CSS for this example

#log { border: 1px solid black; padding: 10px; width: 400px; height: 200px; overflow: auto; } 

Explanation

Much of the above code is just to illustrate, the key points are:

 var i, queue = []; for(i=0; i<200; ++i){ queue.push(someTask(i)); } (jQuery.when.apply(jQuery, queue)) .done(function(){ log('all resolved!'); alert('all resolved!'); }) ; 

The above generates an array of promise objects, and then using apply passes them to jQuery.when which then handles creating the correct structure to trigger a done callback once they have all completed. That is if you want this kind of behavior. If you want a system that will wait for each promise object to resolve in order, before triggering the next task, you'll need something different.

Update

In terms of firing tasks in sequence you need a different approach, something like this:

http://jsfiddle.net/6j6em/2/

function log(msg){ $('#log').append('<div><small>' + msg + '</small></div>'); } function someTask(i){ var dfd = new $.Deferred(); log(':: created task '+i); setTimeout(function(){ log(':: resolved task '+i); dfd.resolve(); },50); return dfd.promise(); } $(function(){ var Queue; Queue = function( items ){ this.items = items.slice(0); this.promise = $.Deferred(); }; Queue.prototype.next = function(){ log(':: next task triggered'); var q = this; q.lastItem = q.items.shift(); if ( q.lastItem ) { q.lastPromise = q.lastItem.func.apply( null, q.lastItem.args ); q.lastPromise.then(function(){ /// include a setTimeout 0 to avoid possible stack/recursion errors. setTimeout(function(){ q.next(); },0); }); } else { /// we are finished q.promise.resolve(); } }; Queue.prototype.run = function(){ this.next(); }; var i, items = []; for(i=0; i<200; ++i){ items.push({ func: someTask, args:[i] }); } var q = new Queue( items ); q.promise.done(function(){ log(':: done!'); alert('Done!'); }); q.run(); }); 

This builds a bespoke Queue object that keeps track of the list of promises, and after the first is successful, triggers the next. This code obviously requires error handling however.

update x2

You can't rely on progress for each promise because there is only one being triggered at any one time. You can add your own notification call out to the overall $.Deferred() object however.

var Queue; Queue = function( items ){ this.items = items.slice(0); this.promise = $.Deferred(); this.count = 0; }; Queue.prototype.next = function(){ log(':: next task triggered'); var q = this; q.lastItem = q.items.shift(); if ( q.lastItem ) { q.lastPromise = q.lastItem.func.apply( null, q.lastItem.args ); q.lastPromise.then(function(){ q.promise.notify(q.count++); q.next(); }); } else { q.promise.resolve(); } }; Queue.prototype.run = function(){ this.next(); }; var q = new Queue( items ); q.promise .done(function(){log(':: done!');}) .progress(function(p){log('::progress ' + p);}) ; q.run();