Принудительный вызов функции Javascript для ожидания до завершения предыдущего

У меня есть простая функция Javascript:

makeRequest();

Он делает кучу вещей и помещает кучу контента в DOM.

Я делаю несколько таких вызовов:

makeRequest('food');
makeRequest('shopping');

Однако они оба стреляют так быстро, что они наступают друг на друга. В конечном итоге мне нужно, чтобы он имел функциональность.

makeRequest('food');
wait....
makeRequest('shopping'); only if makeRequest('food') has finished

Мысли о том, чтобы они выполняли только один за раз?

Спасибо!

Ответ 1

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

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

makeRequest('food', function()
{
    // called when food request is done
    makeRequest('shopping');
});

Используя jQuery, он выглядит примерно так.

$.get("/food", function(food)
{
    // do something with food

    $.get("/shopping", function(shopping)
    {
        // do something with shopping
    });
});

Ответ 2

Я бы рекомендовал вам просто написать их асинхронно - например, вызвать makeRequest ('shopping'); из обработчика завершения AJAX первого вызова.

Если вы не хотите писать свой асинхронный код, см. Javascript Strands

Ответ 3

Я полагаю, что у вас есть метод обратного вызова, который отвечает за ответ на запрос? Сделав это, дайте ему сделать следующий запрос.

Объявить массив для очереди и флаг для отслеживания состояния:

var queue = [], requestRunning = false;

В методе makeRequest:

if (requestRunning) {
   queue.push(requestParameter);
} else {
   requestRunning = true;
   // do the request
}

В методе обратного вызова после ответа на запрос:

if (queue.length > 0) {
   var requestParameter = queue.splice(0,1)[0];
   // do the request
} else {
   requestRunning = false;
}

Ответ 4

Если вам нужно выполнить несколько запросов, выполните последовательно, см. Peter Baker ответ на похожий мой вопрос.