Parallel asynchronous Ajax calls from the client

Question

I have 20 data packet in the client and I am pushing one by one to the server via Ajax post. Each call take approximately one minute to yield the response. Is there any way to make few of these requests run parallel.

I have used Jquery promise. However, still the request waiting for the prior one to get completed.

var dataPackets=[{"Data1"},{"Data2"},{"Data3"},{"Data4"},{"Data5"}, 
                 {"Data6"},{"Data7"},{"Data8"},{"Data9"},{"Data10"},
                 {"Data11"},{"Data12"},{"Data13"},{"Data14"},{"Data15"},{"Data16"}, 
                 {"Data17"},{"Data18"},{"Data19"},{"Data20"}];

$(dataPackets).each(function(indx, request) {

  var req = JSON.stringify(request);

  setTimeout({

    $.Ajax({
      url: "sample/sampleaction",
      data: req,
      success: function(data) {
        UpdateSuccessResponse(data);
      }

    });
  }, 500);
});

Answer 1

$.when.apply($, functionArray) allows you to place an array of functions that can be run in parallel. This function array can be dynamically created. In fact, I'm doing this to export a web page to PDF based on items checked in a radio button list.

Here I create an empty array, var functionArray = []; then based on selected items I push a function on to the array f = createPDF(checkedItems[i].value)

$(document).ready(function () {           
    });
    function sleep(milliseconds) {
       var start = new Date().getTime();
       for (var i = 0; i < 1e7; i++) {
           if ((new Date().getTime() - start) > milliseconds){
               break;
           }
       }
    }
    function exportPDFCollection() {
        var f = null;
        var x = 0;
        var checkedItems = $("input:checked");
        var count = checkedItems.length;

        var reportList = $(checkedItems).map(
             function () { 
                 return $(this).next("label").text();
             })
            .get().join(",");

        var functionArray = [];
        var pdf = null;
        for (var i = 0; i < count; i++) {              
            f = createPDF(checkedItems[i].value)   
                    .done(function () {
                        pdf = checkedItems[x++].value;
                        alert('PDF =>  ' + pdf + ' created.');                            
                    })
                    .fail(function (jqxhr, errorText, errorThrown) {
                        alert('ajax call failed');
                    });
            functionArray.push(f);
        }
        $.when.apply($, functionArray)
        .done(function () {
            $.get("http://yourserver/ExportPage.aspx",{reports: reportList})
                .done(function () {                    
                       alert('PDF merge complete.');
                 })
                 .fail(function (jqxhr, errorText, errorThrown) {
                        alert('PDF merge failed.  Please try again.');
                 });                
            return true;
        });
    }        
    function createPDF(webPage) {
        return $.get(webPage);                
    }        

Answer 2

The when...done construct in jQuery runs ops in parallel..

$.when(request1(), request2(), request3(),...)
  .done(function(data1, data2, data3) {});

Here's an example: http://flummox-engineering.blogspot.com/2015/12/making-your-jquery-ajax-calls-parallel.html