Как сделать все вызовы AJAX последовательными?

Есть гораздо лучший способ сделать это, чем использовать синхронные вызовы ajax. Jquery ajax возвращает отложенное, поэтому вы можете просто использовать цепочку каналов, чтобы убедиться, что каждый вызов ajax завершается до следующего запуска. Вот рабочий пример с более подробным примером, который вы можете поэкспериментировать с jsfiddle.

// How to force async functions to execute sequentially 
// by using deferred pipe chaining.

// The master deferred.
var dfd = $.Deferred(),  // Master deferred
    dfdNext = dfd; // Next deferred in the chain
    x = 0, // Loop index
    values = [], 

    // Simulates $.ajax, but with predictable behaviour.
    // You only need to understand that higher 'value' param 
    // will finish earlier.
    simulateAjax = function (value) {
        var dfdAjax = $.Deferred();

        setTimeout(
            function () {
                dfdAjax.resolve(value);
            },
            1000 - (value * 100)
        );

        return dfdAjax.promise();
    },

    // This would be a user function that makes an ajax request.
    // In normal code you'd be using $.ajax instead of simulateAjax.
    requestAjax = function (value) {
        return simulateAjax(value);
    };

// Start the pipe chain.  You should be able to do 
// this anywhere in the program, even
// at the end,and it should still give the same results.
dfd.resolve();

// Deferred pipe chaining.
// What you want to note here is that an new 
// ajax call will not start until the previous
// ajax call is completely finished.
for (x = 1; x <= 4; x++) {

    values.push(x);

    dfdNext = dfdNext.pipe(function () {
        var value = values.shift();
        return requestAjax(value).
            done(function(response) {
                // Process the response here.

            });

    });

}

Некоторые люди прокомментировали, что понятия не имеют, что делает код. Чтобы понять это, вам сначала нужно понять обещания javascript. Я почти уверен, что обещания скоро станут нативной функцией языка javascript, так что это должно дать вам хороший стимул учиться.

У вас есть два варианта, которые я могу придумать. Один из них — связать их с помощью обратных вызовов. Другой — сделать вызовы синхронными, а не асинхронными.

Есть ли причина, по которой вы хотите, чтобы они были последовательными? Это замедлит ход событий.

Чтобы сделать вызов синхронным, вы установите для параметра async в вызове Ajax значение false. См. документацию по адресу http://docs.jquery.com/Ajax/jQuery.ajax#options (щелкните вкладку параметров, чтобы увидеть их).

Лучший способ сделать это - связать обратные вызовы, как сказал Носредна. Я бы не рекомендовал использовать синхронный XMLHttpRequest, поскольку они блокируют все ваше приложение.

Насколько я знаю, для этого не так много помощников, но вы можете сделать что-то похожее на callback FIFO.

Вы можете попробовать повествовательный JavaScript http://www.neilmix.com/narrativejs/doc/

Установите для параметра async значение false, например,

$.ajax({ async: false /*, your_other_ajax_options_here */ });

Ссылка: Ajax/jQuery.ajax

Посмотрите на это: http://docs.jquery.com/Ajax/jQuery.ajax (перейдите на вкладку "Параметры").

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

РЕДАКТИРОВАТЬ: хорошо, с вашим обновлением становится яснее, чего вы хотите достичь;)

Итак, ваш код может выглядеть так:

    $.getJSON("http://example.com/jsoncall", function(data) {
        process(data);
        $.getJSON("http://example.com/jsoncall2", function (data) {
            processAgain(data);
            $.getJSON("http://example.com/anotherjsoncall", function(data) {
                processAgainAndAgain(data);
            });
        });
    });

Таким образом, второй вызов будет выполняться только после получения и обработки ответа на первый вызов, а третий вызов будет выполняться только после получения и обработки ответа на второй вызов. Этот код предназначен для getJSON, но его можно адаптировать к $.ajax.

(async () => { 
  for(f of ['1.json','2.json','3.json']){
    var json = await $.getJSON(f);
    console.log(json)
 };
})()

1. запрашивает 3 файла json с вызовами jQuery ajax
2. процесс последовательно (не параллельно) с ожиданием
3. работает в Chrome/Firefox/Edge (по состоянию на 30.01.2018)

подробнее на MDN

Вы можете использовать обещание, чтобы сделать вызовы ajax последовательными. Используя метод Array push и pop promise, последовательные вызовы ajax будут намного проще.

var promises = [Promise.resolve()];

function methodThatReturnsAPromise(id) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/todos/'+id,
      dataType:'json',
      success: function(data)
      {
        console.log("Ajax Request Id"+id);
        console.log(data);
        resolve();
      }
    });
  });
} 

function pushPromise(id)
{
  promises.push(promises.pop().then(function(){
    return methodThatReturnsAPromise(id)}));
}


pushPromise(1);
pushPromise(3);
pushPromise(2);

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

Как насчет использования событий Node.js?

var EventEmitter = require('events').EventEmitter;
var eventEmitter = new EventEmitter();
var $ = require('jquery');

var doSomething = function (responseData) {
  var nextRequestData = {};
  // do something with responseData
  return nextRequestData;
};

// ajax requests
var request1 = $.ajax;
var request2 = $.ajax;
var requests = [request1, request2];

eventEmitter.on('next', function (i, requestData) {
  requests[i](requestData).then(
    function (responseData) {
      console.log(i, 'request completed');
      if (i+1 < requests.length) {
        var nextRequestData = doSomething(responseData);
        eventEmitter.emit('next', i+1, nextRequestData);
      }
      else {
        console.log('completed all requests');
      }
    },
    function () {
      console.log(i, 'request failed');
    }
  );
});

var data = {
  //data to send with request 1
};
eventEmitter.emit('next', 0, data);

последовательный != синхронный, и я хотел бы асинхронное и последовательное решение

Синхронное выполнение обычно означает «использование одних и тех же часов», а последовательное выполнение означает «следование порядку или последовательности».

Я думаю, что для вашего конкретного случая использования должны быть выполнены оба условия, поскольку асинхронное выполнение подразумевает возможность непоследовательного результата.