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
  });
}

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
– Rory McCrossan, Commented Aug 29, 2018 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
– stckvrw, Commented May 11, 2020 at 8:44

Senad Meškin · Accepted Answer · 2018-08-29 14:26:12Z

1

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);
   });;
}

answered Aug 29, 2018 at 14:26

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sam999 Over a year ago

Thanks this did the work perfectly :) have a nice day

ibrahimyilmaz · Accepted Answer · 2018-08-29 14:14:11Z

0

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) { ... }
]);

answered Aug 29, 2018 at 14:14

ibrahimyilmaz

2,3751 gold badge25 silver badges28 bronze badges

Collectives™ on Stack Overflow

Jquery multiple Ajax Request in array loop

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related