我已經用jQuery.ajax()方法構建了一個livesearch。在每個鍵入事件中,它都會從服務器接收新的結果數據。jQuery.ajax():放棄緩慢的請求
問題是,當我輸入速度非常快時,例如, 「foobar」和「fooba」的GET請求需要比「foobar」請求更多的時間,「fooba」的結果被顯示。
爲了處理這個超時參數是不可能的,我想。
有沒有人有一個想法如何解決這個問題?
我已經用jQuery.ajax()方法構建了一個livesearch。在每個鍵入事件中,它都會從服務器接收新的結果數據。jQuery.ajax():放棄緩慢的請求
問題是,當我輸入速度非常快時,例如, 「foobar」和「fooba」的GET請求需要比「foobar」請求更多的時間,「fooba」的結果被顯示。
爲了處理這個超時參數是不可能的,我想。
有沒有人有一個想法如何解決這個問題?
爲每個請求分配一個唯一的遞增ID,並且僅以遞增順序顯示它們。例如:
var counter = 0, lastCounter = 0;
function doAjax() {
++counter;
jQuery.ajax(url, function (result) {
if (counter < lastCounter)
return;
lastCounter = counter;
processResult(result);
});
}
您應該只在用戶沒有輸入任何內容(500ms左右)時纔開始搜索。這可以防止你遇到的問題。
一個優秀的jQuery插件,它就是這樣做的是delayedObserver:
使它所以每次取消了最後。這可能是太多的取消,但是當輸入慢時,它會觸發。
這似乎是大量的流量發送每個KeyUp事件的ajax請求。你應該等待用戶停止輸入 - 大概他們已經完成了,至少幾百毫秒。
我會做的是這樣的:
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);
你會希望某種形式的AJAX隊列,如:
http://plugins.jquery.com/project/ajaxqueue
或http://www.protofunc.com/scripts/jquery/ajaxManager/
編輯:另一種選擇,研究自動完成插件代碼和模仿這一點。 (有幾個自動完成以及在jQuery的UI 或只是實現自動完成,如果這符合您的需求
您可以存儲和.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對象,所以才掛到它,當你開始進行下一次搜索,中止前一個。
好評。儘管如果響應時間的差異可能大於.5s(高負載共享主機很容易),它並不能保證解決他的問題。 – Wim 2010-06-15 17:59:45