Как узнать, когда завершились вызовы jquery $ .get ajax?

У меня есть веб-приложение php / mysql / jquery, которое выполняет 13 запросов ajax к различным API и сохраняет результат в таблице базы данных. Каждому результату я присваиваю балл, и когда все результаты завершены, я хочу отобразить «общий балл».

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

Вот существующий рабочий процесс:

  1. Пользователь вводит данные в поле запроса и нажимает "Отправить".
  2. Страница перезагружается и вставляет идентификатор сканирования в таблицу scan_index.
  3. Затем страница выполняет функцию jquery $ .get для каждого из 13 запросов (все запросы используют одну и ту же функцию javascript для выполнения своей работы).
  4. Когда возвращается каждый результат, результат вставляется в таблицу «сканирований» с использованием ранее вставленного «идентификатора сканирования», чтобы обеспечить связь с правильным сканированием. Результат также отображается пользователю вместе с оценкой этого результата.

На этом этапе я бы получил все результаты в таблице сканирования, используя значение scan_id, суммировал счет и отобразил его пользователю.

Но моя проблема заключается в том, чтобы знать, когда начать запрос, чтобы получить все итоги. Любой данный запрос может занять до 10 секунд (мое предопределенное значение тайм-аута) до завершения (или сбоя), но обычно для их выполнения требуется не более 3 секунд.

Итак, не зная, когда будет завершен запрос, как я могу узнать, когда все запросы завершены?

Ответов (3)

Решение

Похоже, что ключевая информация, которую вам не хватает, - это функция обратного вызова $ .get. Вы можете указать функцию в качестве второго или третьего аргумента, которая будет срабатывать после завершения запроса.

$.get('http://example.com/data', {'foo':'bar'}, function(resonseData){
    //code here will be called when the ajax call has completed
})

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

Затем, после того, как вы сделали последний запрос на получение, настройте наблюдателя с помощью setInterval, который будет периодически (например, раз в секунду) проверять, равен ли счетчик нулю. Если это так, все ваши запросы выполнены. Вы, вероятно, могли бы добавить эту проверку к самому обратному вызову $ .get, но похоже, что это может быть подвержено проблемам с синхронизацией.

Это базовое решение, но его можно легко абстрагировать в более надежное / элегантное решение для организации очередей.

Вот еще вариант. Код, возможно, придется подправить, на самом деле я его не тестировал, но это только начало.

var complete = 0;

function submitRequests () {
    $.get("http://server/query1", {"data": "for Query"}, processResult(1));
    $.get("http://server/query2", {"data": "for Query"}, processResult(2));
    //...
    $.get("http://server/query13", {"data": "for Query"}, processResult(13));
}

function processResults (query) {
    complete += Math.pow(2,(query-1));
    if (complete == 8191) {
        $.get("http://server/results", scanid, function() {
            //Show results
        })
    } 
}

Используйте метод jquery ajaxStop ()

        $(document).ajaxStart(function () {
            //first ajax call started
        });

        $(document).ajaxStop(function () {
            //last ajax call stopped
        });