JQuery несколько запросов Ajax в цикле массива

Question

Как сделать несколько запросов AJAX по одному, у меня большой массив данных, и я перебираю этот массив, и в каждом цикле мне нужно сделать запрос AJAX на сервер, но я хочу сделать запрос только тогда, когда последний запрос будет завершен

Теперь это мой код:

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

Answer 1

Я бы решил вашу проблему с рекурсивной функцией.

Шаги:

1. Создать рекурсивную функцию, которая получит один параметр
2. Если длина массива больше 0, продолжите с тела функции
3. Shift array (удаляет первый элемент из массива и сохраняет его в переменной)
4. Вызовите нашу функцию и выполните вызов AJAX с указанными параметрами, а также передайте наш массив
5. Когда AJAX-вызов завершен, вызовите нашу рекурсивную функцию и передайте ей наш массив

Код:

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

Answer 2

Вы можете использовать async.js для нескольких асинхронных операций.

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

Примеры:

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

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