Organizational Research By

Surprising Reserch Topic

parallel asynchronous ajax requests using jquery

parallel asynchronous ajax requests using jquery  using -'javascript,jquery,ajax'

I'd like to update a page based upon the results of multiple ajax/json requests. Using jQuery, I can "chain" the callbacks, like this very simple stripped down example:

$.getJSON("/values/1", function(data) {
  // data = {value: 1}
  var value_1 = data.value;

  $.getJSON("/values/2", function(data) {
    // data = {value: 42}
    var value_2 = data.value;

    var sum = value_1 + value_2;



However, this results in the requests being made serially. I'd much rather a way to make the requests in parallel, and perform the page update after all are complete. Is there any way to do this?

asked Oct 13, 2015 by virendra.bajaj
0 votes

Related Hot Questions

8 Answers

0 votes

Try this solution, which can support any specific number of parallel queries:

var done = 4; // number of total requests
var sum = 0;

/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
  var number = this;
  $.getJSON("/values/" + number, function(data) {
    sum += data.value;
    done -= 1;
    if(done == 0) $("#mynode").html(sum);
answered Oct 13, 2015 by deven.bendale
0 votes

Here's my attempt at directly addressing your question

Basically, you just build up and AJAX call stack, execute them all, and a provided function is called upon completion of all the events - the provided argument being an array of the results from all the supplied ajax requests.

Clearly this is early code - you could get more elaborate with this in terms of the flexibility.

" rel="nofollow" target="_blank">">

here's test.php

answered Oct 13, 2015 by badhwar.rohit
0 votes

Update: Per the answer given by Yair Leviel, this answer is obsolete. Use a promise library, like jQuery.when() or Q.js.

I created a general purpose solution as a jQuery extension. Could use some fine tuning to make it more general, but it suited my needs. The advantage of this technique over the others in this posting as of the time of this writing was that any type of asynchronous processing with a callback can be used.

Note: I'd use Rx extensions for JavaScript instead of this if I thought my client would be okay with taking a dependency on yet-another-third-party-library :)

// jQuery extension for running multiple async methods in parallel
// and getting a callback with all results when all of them have completed.
// Each worker is a function that takes a callback as its only argument, and
// fires up an async process that calls this callback with its result.
// Example:
//      $.parallel(
//          function (callback) { $.get("form.htm", {}, callback, "html"); },
//          function (callback) { $.post("data.aspx", {}, callback, "json"); },
//          function (formHtml, dataJson) { 
//              // Handle success; each argument to this function is 
//              // the result of correlating ajax call above.
//          }
//      );

(function ($) {

    $.parallel = function (anyNumberOfWorkers, allDoneCallback) {

    var workers = [];
    var workersCompleteCallback = null;

    // To support any number of workers, use "arguments" variable to
    // access function arguments rather than the names above.
    var lastArgIndex = arguments.length - 1;
    $.each(arguments, function (index) {
        if (index == lastArgIndex) {
            workersCompleteCallback = this;
        } else {
            workers.push({ fn: this, done: false, result: null });

    // Short circuit this edge case
    if (workers.length == 0) {

    // Fire off each worker process, asking it to report back to onWorkerDone.
    $.each(workers, function (workerIndex) {
        var worker = this;
        var callback = function () { onWorkerDone(worker, arguments); };

    // Store results and update status as each item completes.
    // The [0] on workerResultS below assumes the client only needs the first parameter
    // passed into the return callback. This simplifies the handling in allDoneCallback,
    // but may need to be removed if you need access to all parameters of the result.
    // For example, $.post calls back with success(data, textStatus, XMLHttpRequest).  If
    // you need textStatus or XMLHttpRequest then pull off the [0] below.
    function onWorkerDone(worker, workerResult) {
        worker.done = true;
        worker.result = workerResult[0]; // this is the [0] ref'd above.
        var allResults = [];
        for (var i = 0; i < workers.length; i++) {
            if (!workers[i].done) return;
            else allResults.push(workers[i].result);
        workersCompleteCallback.apply(this, allResults);

answered Oct 13, 2015 by nikhilapatil
0 votes

you could do something like this

var allData = []
$.getJSON("/values/1", function(data) {
    if(data.length == 2){
      processData(allData) // where process data processes all the data

$.getJSON("/values/2", function(data) {
    if(data.length == 2){
    	processData(allData) // where process data processes all the data

var processData = function(data){
     var sum = data[0] + data[1]
answered Oct 13, 2015 by vibhorsingh
0 votes

UPDATE And another two years later, this looks insane because the accepted answer has changed to something much better! (Though still not as good as Yair Leviel's answer using jQuery's when)

18 months later, I just hit something similar. I have a refresh button, and I want the old content to fadeOut and then the new content to fadeIn. But I also need to get the new content. The fadeOut and the get are asynchronous, but it would be a waste of time to run them serially.

What I do is really the same as the accepted answer, except in the form of a reusable function. Its primary virtue is that it is much shorter than the other suggestions here.

var parallel = function(actions, finished) {

  finishedCount = 0;
  var results = [];

  $.each(actions, function(i, action) {

    action(function(result) {

      results[i] = result;

      if (finishedCount == actions.length) {

You pass it an array of functions to run in parallel. Each function should accept another function to which it passes its result (if any). parallel will supply that function.

You also pass it a function to be called when all the operations have completed. This will receive an array with all the results in. So my example was: {

       function(f) { 
       function(f) { 
     function(results) {

So when my refresh button is clicked, I launch jQuery's fadeOut effect and also my own portlet.content function (which does an async get, builds a new bit of content and passes it on), and then when both are complete I remove the old content, append the result of the second function (which is in results[1]) and fadeIn the new content.

As fadeOut doesn't pass anything to its completion function, results[0] presumably contains undefined, so I ignore it. But if you had three operations with useful results, they would each slot into the results array, in the same order you passed the functions.

answered Oct 13, 2015 by dahiyabecomp
0 votes

Run multiple AJAX requests in parallel

When working with APIs, you sometimes need to issue multiple AJAX requests to different endpoints. Instead of waiting for one request to complete before issuing the next, you can speed things up with jQuery by requesting the data in parallel, by using jQuery's $.when() function:


$.when($.get('1.json'), $.get('2.json')).then(function(r1, r2){
   console.log(r1[0].message + " " + r2[0].message);

The callback function is executed when both of these GET requests finish successfully. $.when() takes the promises returned by two $.get() calls, and constructs a new promise object. The r1 and r2 arguments of the callback are arrays, whose first elements contain the server responses.

answered Oct 13, 2015 by tejas lakhani
0 votes

With the following extension of JQuery (to can be written as a standalone function you can do this:

    val1: $.getJSON('/values/1'),
    val2: $.getJSON('/values/2')
    .done(function (results) {
        var sum = results.val1.value + results.val2.value;


The JQuery (1.x) extension whenAll():

$.whenAll = function (deferreds) {
    function isPromise(fn) {
        return fn && typeof fn.then === 'function' &&
            String($.Deferred().then) === String(fn.then);
    var d = $.Deferred(),
        keys = Object.keys(deferreds),
        args = (k) {
            return $.Deferred(function (d) {
                var fn = deferreds[k];

                (isPromise(fn) ? fn : $.Deferred(fn))
                    .fail(function (err) { d.reject(err, k); })

    $.when.apply(this, args)
        .done(function () {
            var resObj = {},
                resArgs =;
            resArgs.forEach(function (v, i) { resObj[keys[i]] = v; });

    return d;

See jsbin example:,console

answered Oct 13, 2015 by dhananjayksharma
0 votes

Here's an implementation using mbostock/queue:

  .defer(function(callback) {
    $.post('/echo/json/', {json: JSON.stringify({value: 1}), delay: 1}, function(data) {
      callback(null, data.value);
  .defer(function(callback) {
    $.post('/echo/json/', {json: JSON.stringify({value: 3}), delay: 2}, function(data) {
      callback(null, data.value);
  .awaitAll(function(err, results) {
    var result = results.reduce(function(acc, value) {
      return acc + value;
    }, 0);

The associated fiddle:

answered Oct 13, 2015 by deepak07.s