Problem chaining a list of jQuery Deferred together

Question

I am trying chaining an array of jQuery Deferred objects together, with the aim to call a final function once everything is resolved.

However, I am unable to get $.when.apply($, deferreds) to work, but I can't figure out why it is not working.

function callBackend(count) {
  var deferred = $.Deferred();
  setTimeout(function() {
    $("div").append("<p>" + count + "</p>");
    deferred.resolve();
  }, 50);
  return deferred.promise();
}

$(function() {
  $("a").click(function() {
    var promises = [];
    for (i = 1; i <= 10; i++) {
      var deferred = $.Deferred();
      callBackend(i).then(function() {
        deferred.resolve();
      });
      promises.push(deferred.promise());
    }
    $.when.apply($, promises).then(function() {
      $("div").append("<p>All done!</p>");
    });
  });
});

I have created a fiddle to illustrate the problem. Anyone got an idea?

http://jsfiddle.net/YNGcm/2244/

Answer 1

You can use directly the deferred element createdin the callBackend.

function callBackend(count) {
  var deferred = $.Deferred();
  setTimeout(function() {
    $("div").append("<p>" + count + "</p>");
    deferred.resolve();
  }, 500);
  return deferred;
}

$(function() {
  $("a").click(function() {
    var promises = [];
    for (i = 1; i <= 10; i++) {
      var deferred = callBackend(i)
      promises.push(deferred);
    }
    $.when.apply($, promises).then(function() {
      $("div").append("<p>All done!</p>");
    });
  });
});

See http://jsfiddle.net/gaby/YNGcm/2243/