Question

I have this code:

var getStuff = function(resources, callback, progressCallback){
  var deferreds = [];
  for(var idx = 0; idx < resources.length; idx++){
     ...
     deferreds.push(<some action>);
  }

  jQuery.when.apply(null, deferreds).then(function(){
    callback && callback();
  });
});

So, this will trigger my callback if I call it with:

getStuff([
  'foo',
  'bar'
], function(){
  console.log("Finished doing stuff!");
});

Question is: How can I make a progressCallback?

Something like:

getStuff([
  'foo',
  'bar'
], function(){
  console.log("Finished doing stuff!");
}, function(obj){
  console.log("Doing stuff with obj: " + obj);
});

Regards!

Answer 1

You could try this approach (I didn’t tried)

var getStuff = function(resources, callback, progressCallback) {

    var deferreds = [];
        len       = resources.length; // need a variable for later iteration

    for(var idx = 0; idx < len; idx++){
       deferreds.push(<some action>);
    }


    deferreds.reverse();  // So the order of deferred lookup is preserved

    /* we create a named self-executed function, so we can call it when 
       a deferred is done and len variable is decremented */

    (function iterateWhen() {
       if (len--) {
         /* call progress callback */
         progressCallback(deferreds[len]); 
         jQuery.when(deferreds[len]).then(function() {
            iterateWhen();
         });
       }
       else {     
          callback && callback();
       }
    }());

};