JS: Цепочка ajax запросов по очереди

Решая задачи с использования javascript часто необходимо использовать запросы к серверу (ajax). Иногда необходимо делать несколько запросов сразу, что приводит к выстраиванию данных запросов в очередь, так как, как правило, сервер может обрабатывать запросы с клиента по одному. Причем порядок запросов будет произвольный. Я расскажу Вас как выполнить набор ajax запросов так, чтобы они выполнились по очереди в указанном порядке.
Допустим у нас есть набор функций f1, f2, f3 которые отсылают ajax запрос на сервер

function f1() {
   $.ajax({url: '/'});
}
function f2() {
   $.ajax({url: '/'});
}
function f3() {
   $.ajax({url: '/'});
}

Для того чтобы реализовать необходимый функционал нам необходимо немного модернизировать наши функции, добавив новый аргумент. Данным аргументом будет функция, которая будет вызываться на событие complete.

function f1(callback) {
   callback = callback || function() { };
   $.ajax({
      url: '/', 
      complete: function() {
          if(typeof(callback) === 'function') {
              callback();
          }    
      }
   });
}
//остальные функции аналогично

Теперь нам необходимо реализовать функцию, которая будет вызывать наши функции в нужном порядке.

function callAjaxFunctions(order, index) {
   index = index || 0; //служебная переменная
   if(index < 0 || index >= order.length) {
      return;
   }
   order[index](function() {
      callAjaxFunctions(order, index + 1);
   });
}

Теперь для того чтобы вызвать функции, описанные выше, например, в порядке f2, f1, f3 достаточно написать следующую строчку:

callAjaxFunctions([f2, f1, f3]);
Запись опубликована в рубрике JavaScript с метками , , , , , , , , , , . Добавьте в закладки постоянную ссылку.