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

Question

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

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

Чтобы справиться с этим с параметром таймаута, я думаю.

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

Answer 1

Назначьте уникальный, увеличивающийся идентификатор для каждого запроса и только покажите их в порядке возрастания. Что-то вроде этого:

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

var ajaxTimeout; 

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


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

    ajaxTimeout = setTimeout(doAjax, 200); 
} 

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

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

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

Answer 5

Вы хотите какой-то очереди АЯКС, такие как:

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

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

EDIT: Еще один вариант, изучить автозаполнения плагин кода и эмуляции этого. (есть несколько автозаполнений, а также один в jquery UI ИЛИ просто реализовать автозаполнение, если это вам подходит

Answer 6

Вы можете хранить и .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 объект, так что просто повесить на него, и когда вы начинаете следующий поиск, прервать операцию Предыдущая.