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

Here's an contrived example of what's going on: http://jsfiddle.net/adamjford/YNGcm/20/

HTML:

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

JavaScript:

function getSomeDeferredStuff() {
    var deferreds = [];

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

        deferreds.push(
        $.post('/echo/html/', {
            html: "<p>Task #" + count + " complete.",
            delay: count
        }).success(function(data) {
            $("div").append(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 $.when() 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.

I want to propose other one with using $.each:

1. We may to declare ajax function like:

   function ajaxFn(someData) {
       this.someData = someData;
       var that = this;
       return function () {
           var promise = $.Deferred();
           $.ajax({
               method: "POST",
               url: "url",
               data: that.someData,
               success: function(data) {
                   promise.resolve(data);
               },
               error: function(data) {
                   promise.reject(data);
               }
           })
           return promise;
       }
   }
   

2. Part of code where we creating array of functions with ajax to send:

   var arrayOfFn = [];
   for (var i = 0; i < someDataArray.length; i++) {
       var ajaxFnForArray = new ajaxFn(someDataArray[i]);
       arrayOfFn.push(ajaxFnForArray);
   }
   

3. And calling functions with sending ajax:

   $.when(
       $.each(arrayOfFn, function(index, value) {
           value.call()
       })
   ).then(function() {
           alert("Cheer!");
       }
   )
   

As a simple alternative, that does not require $.when.apply or an array, you can use the following pattern to generate a single promise for multiple parallel promises:

promise = $.when(promise, anotherPromise);

e.g.

function GetSomeDeferredStuff() {
    // Start with an empty resolved promise (or undefined does the same!)
    var promise;
    var i = 1;
    for (i = 1; i <= 5; i++) {
        var count = i;

        promise = $.when(promise,
        $.ajax({
            type: "POST",
            url: '/echo/html/',
            data: {
                html: "<p>Task #" + count + " complete.",
                delay: count / 2
            },
            success: function (data) {
                $("div").append(data);
            }
        }));
    }
    return promise;
}

$(function () {
    $("a").click(function () {
        var promise = GetSomeDeferredStuff();
        promise.then(function () {
            $("div").append("<p>All done!</p>");
        });
    });
});

Notes:

• I figured this one out after seeing someone chain promises sequentially, using promise = promise.then(newpromise)
• The downside is it creates extra promise objects behind the scenes and any parameters passed at the end are not very useful (as they are nested inside additional objects). For what you want though it is short and simple.
• The upside is it requires no array or array management.

I had a case very similar where I was posting in an each loop and then setting the html markup in some fields from numbers received from the ajax. I then needed to do a sum of the (now-updated) values of these fields and place in a total field.

Thus the problem was that I was trying to do a sum on all of the numbers but no data had arrived back yet from the async ajax calls. I needed to complete this functionality in a few functions to be able to reuse the code. My outer function awaits the data before I then go and do some stuff with the fully updated DOM.

    // 1st
    function Outer() {
        var deferreds = GetAllData();

        $.when.apply($, deferreds).done(function () {
            // now you can do whatever you want with the updated page
        });
    }

    // 2nd
    function GetAllData() {
        var deferreds = [];
        $('.calculatedField').each(function (data) {
            deferreds.push(GetIndividualData($(this)));
        });
        return deferreds;
    }

    // 3rd
    function GetIndividualData(item) {
        var def = new $.Deferred();
        $.post('@Url.Action("GetData")', function (data) {
            item.html(data.valueFromAjax);
            def.resolve(data);
        });
        return def;
    }

If you're transpiling and have access to ES6, you can use spread syntax which specifically applies each iterable item of an object as a discrete argument, just the way $.when() needs it.

$.when(...deferreds).done(() => {
    // do stuff
});

MDN Link - Spread Syntax

You can apply the when method to your array:

var arr = [ /* Deferred objects */ ];

$.when.apply($, arr);

How do you work with an array of jQuery Deferreds?

The workarounds above (thanks!) don't properly address the problem of getting back the objects provided to the deferred's resolve() method because jQuery calls the done() and fail() callbacks with individual parameters, not an array. That means we have to use the arguments pseudo-array to get all the resolved/rejected objects returned by the array of deferreds, which is ugly:

$.when.apply($,deferreds).then(function() {
     var objects=arguments; // The array of resolved objects as a pseudo-array
     ...
};

Since we passed in an array of deferreds, it would be nice to get back an array of results. It would also be nice to get back an actual array instead of a pseudo-array so we can use methods like Array.sort().

Here is a solution inspired by when.js's when.all() method that addresses these problems:

// Put somewhere in your scripting environment
if (typeof jQuery.when.all === 'undefined') {
    jQuery.when.all = function (deferreds) {
        return $.Deferred(function (def) {
            $.when.apply(jQuery, deferreds).then(
                function () {
                    def.resolveWith(this, [Array.prototype.slice.call(arguments)]);
                },
                function () {
                    def.rejectWith(this, [Array.prototype.slice.call(arguments)]);
                });
        });
    }
}

Now you can simply pass in an array of deferreds/promises and get back an array of resolved/rejected objects in your callback, like so:

$.when.all(deferreds).then(function(objects) {
    console.log("Resolved objects:", objects);
});

If you're using angularJS or some variant of the Q promise library, then you have a .all() method that solves this exact problem.

var savePromises = [];
angular.forEach(models, function(model){
  savePromises.push(
    model.saveToServer()
  )
});

$q.all(savePromises).then(
  function success(results){...},
  function failed(results){...}
);

see the full API:

https://github.com/kriskowal/q/wiki/API-Reference#promiseall

https://docs.angularjs.org/api/ng/service/$q

When calling multiple parallel AJAX calls, you have two options for handling the respective responses.

1. Use Synchronous AJAX call/ one after another/ not recommended
2. Use Promises' array and $.when which accepts promises and its callback .done gets called when all the promises are return successfully with respective responses.

Example

function ajaxRequest(capitalCity) {_x000D_
   return $.ajax({_x000D_
        url: 'https://restcountries.eu/rest/v1/capital/'+capitalCity,_x000D_
        success: function(response) {_x000D_
        },_x000D_
        error: function(response) {_x000D_
          console.log("Error")_x000D_
        }_x000D_
    });_x000D_
}_x000D_
$(function(){_x000D_
   var capitalCities = ['Delhi', 'Beijing', 'Washington', 'Tokyo', 'London'];_x000D_
   $('#capitals').text(capitalCities);_x000D_
_x000D_
   function getCountryCapitals(){ //do multiple parallel ajax requests_x000D_
      var promises = [];   _x000D_
      for(var i=0,l=capitalCities.length; i<l; i++){_x000D_
            var promise = ajaxRequest(capitalCities[i]);_x000D_
            promises.push(promise);_x000D_
      }_x000D_
  _x000D_
      $.when.apply($, promises)_x000D_
        .done(fillCountryCapitals);_x000D_
   }_x000D_
  _x000D_
   function fillCountryCapitals(){_x000D_
        var countries = [];_x000D_
        var responses = arguments;_x000D_
        for(i in responses){_x000D_
            console.dir(responses[i]);_x000D_
            countries.push(responses[i][0][0].nativeName)_x000D_
        }  _x000D_
        $('#countries').text(countries);_x000D_
   }_x000D_
  _x000D_
   getCountryCapitals()_x000D_
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div>_x000D_
  <h4>Capital Cities : </h4> <span id="capitals"></span>_x000D_
  <h4>Respective Country's Native Names : </h4> <span id="countries"></span>_x000D_
</div>