Jquery multiple Ajax Request in array loop

Question

How can make multiple ajax requests on by one i have a big array of data and i loop through that array and in every loop i need to make ajax request to server but i want to make request only when last request is finsihed

This is my code now:

// This is loop for BigData

length = BigArray.length;

for (i = 0; i < length; i++) {
  token = BigArray[i][0];
  name = titleCase(BigArray[i][1]);
  ajaxRequest(token, name);
}

function ajaxRequest(token, title) {
  $.post(APP_URL + "/message/send", {
    "_token": Laraveltoken,
    title: title,
    token: token
  }, function(data, status) {
    //When Done start next request
  });
}

Possible duplicate of [Sequencing ajax requests](https://stackoverflow.com/questions/3034874/sequencing-ajax-requests) — George, Aug 29 '18 at 14:12
I would strongly suggest you don't make AJAX requests in a loop; you can end up DDOS-ing yourself. Instead loop to congregate all data together then send that in a single request to the server. — Rory McCrossan, Aug 29 '18 at 14:13
@RoryMcCrossan do you mean just a loop or multiple ajax requests in general? If to call multiple requests using recursive function, may it be the same result you mentioned? — stckvrw, May 11 '20 at 08:44
I mean multiple AJAX requests in general. Making them in a recursive function has the same problem I mentioned in the comment above. — Rory McCrossan, May 11 '20 at 09:16
@RoryMcCrossan thanks. Could you join the discussion by the link https://stackoverflow.com/q/61725911/3208225 — stckvrw, May 11 '20 at 09:45

score 1 · Accepted Answer · answered Aug 29 '18 at 14:26

I would solve your problem with recursive function.

Steps:

Create a recursive function which will receive one parameter
If array length is larger than 0 continue with the function body
Shift array ( removes the first item from an array and store it into the variable)
Call our function and execute AJAX call with provided parameters, and also pass our array
When AJAX call is finished call our recursive function and pass our array to it

Code:

function myRecursiveFunction(myArray){
   if(myArray.length == 0) return;

   //remove first item of an array then store it into variable item
   var item = myArray.shift(); 
   //call our method which will execute AJAX call to server
   ajaxRequest(item[0], titleCase(item[1]), myArray);
}

function ajaxRequest(token, title, myArray) {
  $.post(APP_URL + "/message/send", {
    "_token": Laraveltoken,
    title: title,
    token: token
  }, function(data, status) {
    //When Done start next request
  }).always(function(){
    //call our recursive function
    myRecursiveFunction(myArray);
   });;
}

Thanks this did the work perfectly :) have a nice day – sam999 Aug 30 '18 at 06:49 — sam999, Aug 30 '18 at 06:49

score 0 · Answer 2 · answered Aug 29 '18 at 14:14

You can use async.js for multiple asynchronous operation.

https://caolan.github.io/async/

Examples:

async.parallel([
    function(callback) { ... },
    function(callback) { ... }
], function(err, results) {
    // optional callback
});

async.series([
    function(callback) { ... },
    function(callback) { ... }
]);

Jquery multiple Ajax Request in array loop

2 Answers2

Linked