user1982408 user1982408 - 5 months ago 26
jQuery Question

Multiple ajax calls from array and handle callback when completed

I have used promises in jQuery slightly before - but I am having trouble applying it to this scenario. I prefer to use the $.when() and $.done() methods to achieve this.

From what I understand I need to build a $.Deferred object which logs the requests and when those requests are finished - fire the callback. In my code below the callback is firing before the ajax requests and not after - maybe I just need some sleep

I know my code is incomplete I have been struggling to apply it with the addition of the for loop.

var list = ['obj1', 'obj2', 'obj3', 'obj4', 'obj5'];
var callback = function() {
var requests = [];

var ajaxFunction = function(obj, successCallback, errorCallback) {
for(i = 0; i < list.length; i++) {
url: 'url',
success: function() {
$.when($.ajax(), ajaxFunction).then(function(results){callback()});


The arguments to $.when should be the return value of $.ajax, which also doesn't need to be called separately -- that makes no sense. You want something like this:

for (i = 0; i < list.length; i++) {
$.when.apply(undefined, requests).then(...)

The reason that .apply is needed is because $.when can take multiple arguments, but not an array of arguments. .apply expands essentially to:

$.when(requests[0], requests[1], ...)

This also assumes that the requests can be completed in any order. -- notice that 'done' is logged to the console after all of the success messages.