Pass in an array of Deferreds to when

Question

Here s an contrived example of what s going on  http   jsfiddle net adamjford YNGcm 20   HTML    lt a href     gt Click me  lt  a gt   lt div gt  lt  div gt    JavaScript   function getSomeDeferredStuff         var deferreds            var i   1      for  i   1  i  lt   10  i              var count   i           deferreds push            post   echo html                  html    lt p gt 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   lt p gt All done  lt  p gt                               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

User · Answer

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;
    }

User · Answer

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

User · Answer

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

User · Answer

I want to propose other one with using   each    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           Part of code where we creating array of functions with ajax to send   var arrayOfFn       for  var i   0  i  lt  someDataArray length  i          var ajaxFnForArray   new ajaxFn someDataArray i        arrayOfFn push ajaxFnForArray      And calling functions with sending ajax     when        each arrayOfFn  function index  value            value call            then function             alert  Cheer

User · Answer

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

User · Answer

When calling multiple parallel AJAX calls  you have two options for handling the respective responses    Use Synchronous AJAX call  one after another  not recommended 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   x000D   x000D  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 lt 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     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt  x000D     lt h4 gt Capital Cities    lt  h4 gt   lt span id  capitals  gt  lt  span gt  x000D     lt h4 gt Respective Country s Native Names    lt  h4 gt   lt span id  countries  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  then           See http   jsfiddle net YNGcm 21   In ES6  you can use the     spread operator instead     when    my array  then           In either case  since it s unlikely that you ll known in advance how many formal parameters the  then handler will require  that handler would need to process the arguments array in order to retrieve the result of each promise

User · Answer

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      gt           do stuff       MDN Link - Spread Syntax

User · Answer

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  lt   5  i              var count   i           promise     when promise            ajax               type   POST               url    echo html                data                    html    lt p gt 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   lt p gt All done  lt  p gt                               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

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

Examples related to javascript

Examples related to jquery

Examples related to argument-passing

Examples related to jquery-deferred

Examples related to .when