Basically I want this:

function do_ajax_calls(...){
  var d = $.Deferred();

  $.ajax(args).done(function(){

    $.ajax(args).done(function(){

      $.ajax(args).done(function(){
         d.resolve();
      });

    });

  })

  return d.promise();
}

But the number of ajax calls depends on the arguments that I pass to the function, which is an array, so I can't use that code.

The function should return a promise that only resolves when the last ajax calls pletes. So the function needs to be called like this:

 do_ajax_calls(....).done(function(){
   // here is the callback
 })

Does anyone know how can I do this?

Basically I want this:

function do_ajax_calls(...){
  var d = $.Deferred();

  $.ajax(args).done(function(){

    $.ajax(args).done(function(){

      $.ajax(args).done(function(){
         d.resolve();
      });

    });

  })

  return d.promise();
}

But the number of ajax calls depends on the arguments that I pass to the function, which is an array, so I can't use that code.

The function should return a promise that only resolves when the last ajax calls pletes. So the function needs to be called like this:

 do_ajax_calls(....).done(function(){
   // here is the callback
 })

Does anyone know how can I do this?

• javascript
• jquery
• promise
• jquery-deferred

• I think that with some kind of eval I can pass string that is built before but I'm not sure if that's the best method – Anna K. Commented Sep 26, 2015 at 1:02

4 Answers 4

But the number of ajax calls depends on the arguments that I pass to the function, which is an array

If it's one ajax call per array item

function do_ajax_calls(args) {
    return args.reduce(function(promise, item) {
        return promise.then(function() { 
            return $.ajax(args); // should that be item?
        });
    }, Promise.resolve(true));
}

The Promise.resolve(true) is a "native" promise, i.e. not available in IE, but I'm sure jQuery has an equivalent

Here's a JSFiddle Demo

One of the reasons promises are a big deal is because they can be chained. You can use this to your advantage to iteratively chain additional requests onto the resolution of the previous one:

function do_ajax_calls() {
    var dfd = $.Deferred();
    var promise = dfd.promise();
    var responses = [];

    function chainRequest(url) {
        promise = promise.then(function (response) {
            responses.push(response);
            return $.ajax(url, { method: 'POST' });
        });
    }

    for (var i = 0, length = arguments.length; i < length; i++) {
        chainRequest(arguments[i]);
    }

    dfd.resolve();

    return promise.then(function (response) {
        return responses.slice(1).concat(response);
    });
}

The above code will return a promise ultimately resolving to an array of all of the responses. If any one of the requests fails, the promise will reject with the first failure.

JSFiddle

Here is it Demo

var counter = 1 ;

function multipleAjax(loop)
{
   if(counter<loop)
   {
        $.ajax(
        {
            url: 'http://mouadhhsoumi.tk/echo.php',
            success:function(data)
            {
                multipleAjax(loop);
                $(".yo").append(data+"</br>");
                counter++;
            }
        });

   }
}
multipleAjax(5);

Try using $.when() , Function.prototype.apply() , $.map()

function do_ajax_calls(args) {
  return $.when.apply($, $.map(args, function(request, i) {
    return $.ajax(request) // `request` : item with `args` array
  }))
}

do_ajax_calls
.then(function success() {
  console.log(arguments)
}, function err() {
  console.log("err", arguments)
});