jQuery.ajax (): отбросить медленные запросы

Question

Я собрал livesearch с помощью метода jQuery.ajax ().При каждом событии keyup он получает новые данные результатов с сервера.

Проблема в том, что когда я печатаю очень быстро, например, "foobar", а запрос GET для "fooba" требует больше времени, чем для "foobar"request, результаты" fooba "показаны.

Обработка этого с параметром timeout невозможна, я думаю.

У кого-нибудь есть идеи, как решить эту проблему?

Answer 1

Вы можете сохранить и .abort() последний запрос при запуске нового, например:

var curSearch;
$("#myInput").keyup(function() {
  if(curSearch) curSearch.abort(); //cancel previous search
  curSearch = $.ajax({ ...ajax options... }); //start a new one, save a reference
});

Метод $.ajax() возвращает XmlHttpRequest объекта, поэтому просто повесьте его, а когда вы начнете следующий поиск, прервите предыдущий.

Answer 2

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

var counter = 0, lastCounter = 0;
function doAjax() {
  ++counter;
  jQuery.ajax(url, function (result) {
    if (counter < lastCounter)
      return;
    lastCounter = counter;
    processResult(result);
  });
}

Answer 3

Вам понадобится какая-то очередь Ajax, такая как:

http://plugins.jquery.com/project/ajaxqueue

или http://www.protofunc.com/scripts/jquery/ajaxManager/

РЕДАКТИРОВАТЬ: еще один вариант, изучить код подключаемого модуля автозаполнения и эмулировать его. ИЛИ просто внедрите автозаполнение, если это соответствует вашим потребностям

Answer 4

Похоже, что интенсивный трафик отправляет запрос ajax для каждого события KeyUp. Вам следует подождать, пока пользователь прекратит печатать - предположительно, что они закончили, по крайней мере, несколько 100 миллисекунд.

Что бы я сделал, это:

var ajaxTimeout;

function doAjax() {
     //Your actual ajax request code
}


function keyUpHandler() {
    if (ajaxTimeout !== undefined) 
        clearTimeout(ajaxTimeout);

    ajaxTimeout = setTimeout(doAjax, 200);
}

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

Edit: Если вам нужно передать параметры, создайте встроенную функцию (замыкание).

...
var fun = function() { doAjax(params...) };
ajaxTimeout = setTimeout(fun, 200);

Answer 5

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

Answer 6

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

Отличный плагин jQuery, который делает именно это: delayedObserver :

http://code.google.com/p/jquery-utils/wiki/DelayedObserver