adamjford adamjford - 10 months ago 32
jQuery Question

Pass in an array of Deferreds to $.when()

Here's an contrived example of what's going on:


<a href="#">Click me!</a>


function getSomeDeferredStuff() {
var deferreds = [];

var i = 1;
for (i = 1; i <= 10; i++) {
var count = i;

$.post('/echo/html/', {
html: "<p>Task #" + count + " complete.",
delay: count
}).success(function(data) {

return deferreds;

$(function() {
$("a").click(function() {
var deferreds = getSomeDeferredStuff();

$.when(deferreds).done(function() {
$("div").append("<p>All done!</p>");

I want "All done!" to appear after all of the deferred tasks have completed, but
doesn't appear to know how to handle an array of Deferred objects. "All done!" is happening first because the array is not a Deferred object, so jQuery goes ahead and assumes it's just done.

I know one could pass the objects into the function like
$.when(deferred1, deferred2, ..., deferredX)
but it's unknown how many Deferred objects there will be at execution in the actual problem I'm trying to solve.


To pass an array of values to any function that normally expects them to be separate parameters, use Function.prototype.apply, so in this case you need:

$.when.apply($, my_array);