[javascript] Wait until all jQuery Ajax requests are done?

How do I make a function wait until all jQuery Ajax requests are done inside another function?

In short, I need to wait for all Ajax requests to be done before I execute the next. But how?

Try this way. make a loop inside java script function to wait until the ajax call finished.

function getLabelById(id)
{
    var label = '';
    var done = false;
    $.ajax({
       cache: false,
       url: "YourMvcActionUrl",
       type: "GET",
       dataType: "json",
       async: false,
       error: function (result) {
         label='undefined';
         done = true;
        },
       success: function (result) {
            label = result.Message;
            done = true;
        }
     });

   //A loop to check done if ajax call is done.
   while (!done)
   {
      setTimeout(function(){ },500); // take a sleep.
   }

    return label;
}

I found simple way, it using shift()

function waitReq(id)
{
  jQuery.ajax(
  {
    type: 'POST',
    url: ajaxurl,
    data:
    {
      "page": id
    },
    success: function(resp)
    {
      ...........
      // check array length if not "0" continue to use next array value
      if(ids.length)
      {
        waitReq(ids.shift()); // 2
      )
    },
    error: function(resp)
    {
      ....................
      if(ids.length)
      {
        waitReq(ids.shift());
      )
    }
  });
}

var ids = [1, 2, 3, 4, 5];    
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1

I'm using size check when all ajax load completed

function get_ajax(link, data, callback) {_x000D_
    $.ajax({_x000D_
        url: link,_x000D_
        type: "GET",_x000D_
        data: data,_x000D_
        dataType: "json",_x000D_
        success: function (data, status, jqXHR) {_x000D_
            callback(jqXHR.status, data)_x000D_
        },_x000D_
        error: function (jqXHR, status, err) {_x000D_
            callback(jqXHR.status, jqXHR);_x000D_
        },_x000D_
        complete: function (jqXHR, status) {_x000D_
        }_x000D_
    })_x000D_
}_x000D_
_x000D_
function run_list_ajax(callback){_x000D_
    var size=0;_x000D_
    var max= 10;_x000D_
    for (let index = 0; index < max; index++) {_x000D_
        var link = 'http://api.jquery.com/ajaxStop/';_x000D_
        var data={i:index}_x000D_
        get_ajax(link,data,function(status, data){_x000D_
            console.log(index)_x000D_
            if(size>max-2){_x000D_
                callback('done')_x000D_
            }_x000D_
            size++_x000D_
            _x000D_
        })_x000D_
    }_x000D_
}_x000D_
_x000D_
run_list_ajax(function(info){_x000D_
    console.log(info)_x000D_
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

A little workaround is something like this:

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

Hope can be useful...

Also you could use async.js.

I think its better than $.when because you can merge all kinds of asynchronous call that does not support promises out of the box like timeouts, SqlLite calls etc. and not just ajax requests.

To expand upon Alex's answer, I have an example with variable arguments and promises. I wanted to load images via ajax and display them on the page after they all loaded.

To do that, I used the following:

let urlCreator = window.URL || window.webkitURL;

// Helper function for making ajax requests
let fetch = function(url) {
    return $.ajax({
        type: "get",
        xhrFields: {
            responseType: "blob"
        },
        url: url,
    });
};

// Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));

// Use the spread operator to wait for all requests
$.when(...files).then(function() {
    // If we have multiple urls, then loop through
    if(urls.length > 1) {
        // Create image urls and tags for each result
        Array.from(arguments).forEach(data => {
            let imageUrl = urlCreator.createObjectURL(data[0]);
            let img = `<img src=${imageUrl}>`;
            $("#image_container").append(img);
        });
    }
    else {
        // Create image source and tag for result
        let imageUrl = urlCreator.createObjectURL(arguments[0]);
        let img = `<img src=${imageUrl}>`;
        $("#image_container").append(img);
    }
});

Updated to work for either single or multiple urls: https://jsfiddle.net/euypj5w9/

Look at my solution:

1.Insert this function (and variable) into your javascript file:

var runFunctionQueue_callback;

function runFunctionQueue(f, index, callback) {

  var next_index = index + 1

  if (callback !== undefined) runFunctionQueue_callback = callback;

  if (f[next_index] !== undefined) {
    console.log(index + ' Next function avalaible -> ' + next_index);
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      complete: function() {
        runFunctionQueue(f, next_index);
      }
    });
  } else {
    console.log(index + ' Last function');
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      async: false,
      complete: runFunctionQueue_callback
    });
  }
}

2.Buil an array with your requests, like this:

var f = [
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}}
        ];

3.Create callback function:

function Function_callback() {
  alert('done');
}

4.Call the runFunctionQueue function with parameters:

runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function

jQuery allows you to specify if you want the ajax request to be asynchronous or not. You can simply make the ajax requests synchronous and then the rest of the code won't execute until they return.

For example:

jQuery.ajax({ 
    async: false,
    //code
});

If you need something simple; once and done callback

        //multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();

If you want to know when all ajax requests are finished in your document, no matter how many of them exists, just use $.ajaxStop event this way:

$(document).ajaxStop(function () {
  // 0 === $.active
});

In this case, neither you need to guess how many requests are happening in the application, that might finish in the future, nor dig into functions complex logic or find which functions are doing HTTP(S) requests.

$.ajaxStop here can also be bound to any HTML node that you think might be modified by requst.

Update:
If you want to stick with ES syntax, then you can use Promise.all for known ajax methods:

Promise.all([ajax1(), ajax2()]).then(() => {
  // all requests finished successfully
}).catch(() => {
  // all requests finished but one or more failed
})

An interesting point here is that it works both with Promises and $.ajax requests.

Here is the jsFiddle demonstration.

Update 2:
Yet more recent version using async/await syntax:

try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }

NOTE: The above answers use functionality that didn't exist at the time that this answer was written. I recommend using jQuery.when() instead of these approaches, but I'm leaving the answer for historical purposes.

-

You could probably get by with a simple counting semaphore, although how you implement it would be dependent on your code. A simple example would be something like...

var semaphore  = 0,     // counting semaphore for ajax requests
    all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts

semaphore++;
$.get('ajax/test1.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test2.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test3.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test4.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;

If you wanted this to operate like {async: false} but you didn't want to lock the browser, you could accomplish the same thing with a jQuery queue.

var $queue = $("<div/>");
$queue.queue(function(){
    $.get('ajax/test1.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test2.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test3.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test4.html', function(data) {
        $queue.dequeue();
    });
});

As other answers mentioned you can use ajaxStop() to wait until all ajax request are completed.

$(document).ajaxStop(function() {
     // This function will be triggered every time any ajax request is requested and completed
});

If you want do it for an specific ajax() request the best you can do is use complete() method inside the certain ajax request:

$.ajax({
    type: "POST",
    url: "someUrl",
    success: function(data) {
        // This function will be triggered when ajax returns a 200 status code (success)
    },
    complete: function() {
        // This function will be triggered always, when ajax request is completed, even it fails/returns other status code
    },
    error: function() {
        // This will be triggered when ajax request fail.
    }
});

But, If you need to wait only for a few and certain ajax request to be done? Use the wonderful javascript promises to wait until the these ajax you want to wait are done. I made a shortly, easy and readable example to show you how does promises works with ajax.
Please take a look to the next example. I used setTimeout to clarify the example.

// Note:_x000D_
// resolve() is used to mark the promise as resolved_x000D_
// reject() is used to mark the promise as rejected_x000D_
_x000D_
$(document).ready(function() {_x000D_
    $("button").on("click", function() {_x000D_
_x000D_
        var ajax1 = new Promise((resolve, reject) => {_x000D_
            $.ajax({_x000D_
                type: "GET",_x000D_
                url: "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png",_x000D_
                xhrFields: { responseType: 'blob'},_x000D_
                success: function(data) {_x000D_
                    setTimeout(function() {_x000D_
                        $('#image1').attr("src", window.URL.createObjectURL(data));_x000D_
                        resolve(" Promise ajax1 resolved");_x000D_
                    }, 1000);_x000D_
                },_x000D_
                error: function() {_x000D_
                    reject(" Promise ajax1 rejected");_x000D_
                },_x000D_
            });_x000D_
        });_x000D_
_x000D_
        var ajax2 = new Promise((resolve, reject) => {_x000D_
            $.ajax({_x000D_
                type: "GET",_x000D_
                url: "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png",_x000D_
                xhrFields: { responseType: 'blob' },_x000D_
                success: function(data) {_x000D_
                    setTimeout(function() {_x000D_
                         $('#image2').attr("src", window.URL.createObjectURL(data));_x000D_
                         resolve(" Promise ajax2 resolved");_x000D_
                    }, 1500);_x000D_
                },_x000D_
                error: function() {_x000D_
                    reject(" Promise ajax2 rejected");_x000D_
                },_x000D_
            });_x000D_
        });_x000D_
_x000D_
        var ajax3 = new Promise((resolve, reject) => {_x000D_
            $.ajax({_x000D_
                type: "GET",_x000D_
                url: "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png",_x000D_
                xhrFields: { responseType: 'blob' },_x000D_
                success: function(data) {_x000D_
                    setTimeout(function() {_x000D_
                         $('#image3').attr("src", window.URL.createObjectURL(data));_x000D_
                         resolve(" Promise ajax3 resolved");_x000D_
                    }, 2000);_x000D_
                },_x000D_
                error: function() {_x000D_
                    reject(" Promise ajax3 rejected");_x000D_
                },_x000D_
            });_x000D_
        });_x000D_
        _x000D_
        Promise.all([ajax1, ajax2, ajax3]).then(values => {_x000D_
            console.log("We waited until ajax ended: " + values);_x000D_
            console.log("My few ajax ended, lets do some things!!")_x000D_
        }, reason => {_x000D_
            console.log("Promises failed: " + reason);_x000D_
        });_x000D_
        _x000D_
        // Or if you want wait for them individually do it like this_x000D_
        // ajax1.then(values => {_x000D_
        //    console.log("Promise 1 resolved: " + values)_x000D_
        // }, reason => {_x000D_
        //     console.log("Promise 1 failed: " + reason)_x000D_
        // });_x000D_
    });_x000D_
_x000D_
});

img {_x000D_
  max-width: 200px;_x000D_
  max-height: 100px;_x000D_
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<button>Make AJAX request</button>_x000D_
<div id="newContent">_x000D_
    <img id="image1" src="">_x000D_
    <img id="image2" src="">_x000D_
    <img id="image3" src="">_x000D_
</div>

On the basis of @BBonifield answer, I wrote a utility function so that semaphore logic is not spread in all the ajax calls.

untilAjax is the utility function which invokes a callback function when all the ajaxCalls are completed.

ajaxObjs is a array of ajax setting objects [http://api.jquery.com/jQuery.ajax/].

fn is callback function

function untilAjax(ajaxObjs, fn) {
  if (!ajaxObjs || !fn) {
    return;
  }
  var ajaxCount = ajaxObjs.length,
    succ = null;

  for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
    succ = ajaxObjs[i]['success'];
    ajaxObjs[i]['success'] = function(data) { //modified success handler
      if (succ) {
        succ(data);
      }
      ajaxCount--;
      if (ajaxCount == 0) {
        fn(); //modify statement suitably if you want 'this' keyword to refer to another object
      }
    };
    $.ajax(ajaxObjs[i]); //make ajax call
    succ = null;
  };

Example: doSomething function uses untilAjax.

function doSomething() {
  // variable declarations
  untilAjax([{
    url: 'url2',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url1',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url2',
    dataType: 'json',
    success: function(response) {
      //do something with success data
    }
  }], function() {
    // logic after all the calls are completed.
  });
}

I highly recommend using $.when() if you're starting from scratch.

Even though this question has over million answers, I still didn't find anything useful for my case. Let's say you have to deal with an existing codebase, already making some ajax calls and don't want to introduce the complexity of promises and/or redo the whole thing.

We can easily take advantage of jQuery .data, .on and .trigger functions which have been a part of jQuery since forever.

Codepen

The good stuff about my solution is:

• it's obvious what the callback exactly depends on

• the function triggerNowOrOnLoaded doesn't care if the data has been already loaded or we're still waiting for it

• it's super easy to plug it into an existing code

$(function() {_x000D_
_x000D_
  // wait for posts to be loaded_x000D_
  triggerNowOrOnLoaded("posts", function() {_x000D_
    var $body = $("body");_x000D_
    var posts = $body.data("posts");_x000D_
_x000D_
    $body.append("<div>Posts: " + posts.length + "</div>");_x000D_
  });_x000D_
_x000D_
_x000D_
  // some ajax requests_x000D_
  $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) {_x000D_
    $("body").data("posts", data).trigger("posts");_x000D_
  });_x000D_
_x000D_
  // doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests _x000D_
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(data) {_x000D_
    $("body").data("users", data).trigger("users");_x000D_
  });_x000D_
_x000D_
_x000D_
  // wait for both types_x000D_
  triggerNowOrOnLoaded(["posts", "users"], function() {_x000D_
    var $body = $("body");_x000D_
    var posts = $body.data("posts");_x000D_
    var users = $body.data("users");_x000D_
_x000D_
    $body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>");_x000D_
  });_x000D_
_x000D_
  // works even if everything has already loaded!_x000D_
  setTimeout(function() {_x000D_
_x000D_
    // triggers immediately since users have been already loaded_x000D_
    triggerNowOrOnLoaded("users", function() {_x000D_
      var $body = $("body");_x000D_
      var users = $body.data("users");_x000D_
_x000D_
      $body.append("<div>Delayed Users: " + users.length + "</div>");_x000D_
    });_x000D_
_x000D_
  }, 2000); // 2 seconds_x000D_
_x000D_
});_x000D_
_x000D_
// helper function_x000D_
function triggerNowOrOnLoaded(types, callback) {_x000D_
  types = $.isArray(types) ? types : [types];_x000D_
_x000D_
  var $body = $("body");_x000D_
_x000D_
  var waitForTypes = [];_x000D_
  $.each(types, function(i, type) {_x000D_
_x000D_
    if (typeof $body.data(type) === 'undefined') {_x000D_
      waitForTypes.push(type);_x000D_
    }_x000D_
  });_x000D_
_x000D_
  var isDataReady = waitForTypes.length === 0;_x000D_
  if (isDataReady) {_x000D_
    callback();_x000D_
    return;_x000D_
  }_x000D_
_x000D_
  // wait for the last type and run this function again for the rest of the types_x000D_
  var waitFor = waitForTypes.pop();_x000D_
  $body.on(waitFor, function() {_x000D_
    // remove event handler - we only want the stuff triggered once_x000D_
    $body.off(waitFor);_x000D_
_x000D_
    triggerNowOrOnLoaded(waitForTypes, callback);_x000D_
  });_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<body>Hi!</body>

Use the ajaxStop event.

For example, let's say you have a loading ... message while fetching 100 ajax requests and you want to hide that message once loaded.

From the jQuery doc:

$("#loading").ajaxStop(function() {
  $(this).hide();
});

Do note that it will wait for all ajax requests being done on that page.

$.when doesn't work for me, callback(x) instead of return x worked as described here: https://stackoverflow.com/a/13455253/10357604

javascript is event-based, so you should never wait, rather set hooks/callbacks

You can probably just use the success/complete methods of jquery.ajax

Or you could use .ajaxComplete :

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
    //and you can do whatever other processing here, including calling another function...
  }
});

though youy should post a pseudocode of how your(s) ajax request(s) is(are) called to be more precise...

My solution is as follows

var request;
...
'services': {
  'GetAddressBookData': function() {
    //This is the primary service that loads all addressbook records 
    request = $.ajax({
      type: "POST",
      url: "Default.aspx/GetAddressBook",
      contentType: "application/json;",
      dataType: "json"
    });
  },

  ...

  'apps': {
    'AddressBook': {
      'data': "",
      'Start': function() {
          ...services.GetAddressBookData();
          request.done(function(response) {
            trace("ajax successful");
            ..apps.AddressBook.data = response['d'];
            ...apps.AddressBook.Filter();
          });
          request.fail(function(xhr, textStatus, errorThrown) {
            trace("ajax failed - " + errorThrown);
          });

Worked quite nicely. I've tried a lot of different ways of doing this, but I found this to be the simplest and most reusable. Hope it helps

I found a good answer by gnarf my self which is exactly what I was looking for :)

jQuery ajaxQueue

//This handles the queues    
(function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Then you can add a ajax request to the queue like this:

$.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });

This is working for me It's very simple

return $.ajax({
  type: 'POST',
  url: urlBaseUrl
  data: {someData:someData},
  dataType: "json",
  success: function(resultData) { 
  }
});