Обработка последовательных запросов Ajax - JQUERY

Question

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

Например, если я наберу airport:

Я получаю 7 запросов ajax, каждый из которых ищет a, ai, air, airp, airpo, airpor, airport соответственно - однако проблема в том, что все они могут начинаться один за другим, но не обязательно заканчиваться в одном и том же порядке, поэтому чаще всего я получаю результаты в неправильном порядке, то есть я мог написать airport и получить результат только для airport, чтобы потом получить результат для airpo.

Как мне справиться с этим в jQuery здесь?

Обновление:

Таймер задержки составляет 3 секунды, но проблема заключается в том, чтобы при выполнении одного запроса AJAX другой запрос отменял предыдущий запрос и т. Д.

Как я мог сделать это в коде?

Answer 1

Запустить вызов ajax с задержкой - используйте это вместе с кодом abort() выше:

var typeDelay = function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    }  
}();

$("#searchField").keypress(function(){
    typeDelay(function(){
        // your ajax search here, with a 300 ms delay...
    }, 300);
});

Answer 2

Отправка запроса на поиск при каждом нажатии клавиши, как правило, плохая идея - вместо этого я рекомендую отправлять через короткие интервалы (т. Е. Отправлять значение текстового поля каждые 3 секунды или около того).

Кроме того, для предотвращения асинхронных возвратов у вас может быть флаг для отслеживания состояния запроса, так что только один может быть активным в любой момент времени (например, установлен при отправке, очищен при возврате). Это эффективно сделает ваши поиски синхронными.

---

РЕДАКТИРОВАТЬ: Добавлен пример кода

var req = null;

function sendRequest (text)
{
    // Check for pending request & cancel it
    if (req) req.abort ();

    req = $.ajax ({
        // various options..
        success: function (data)
        {
            // Process data
            ...
            // reset request
            req = null;
        }
    });
}

Answer 3

Вы можете отменить запросы AJAX:

var x = $.ajax({
    ...
});

x.abort()

Поэтому, если вы хотите отправить новый запрос до того, как предыдущий вернулся, прервите () первый запрос.

Answer 4

1. Создайте «очередь ajax» в jquery ... используйте ее, чтобы убедиться, что ваши запросы идут в порядке. Приведенный ниже адрес имеет отличный пример внизу:

   AJAX Методы оптимизации?

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

   Если другой запрос отправлен в очередь до истечения задержки, прервите поставленный в очередь запрос.

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