如何避免keyup事件的連續ajax請求的開銷？

例如在用戶輸入一些文本時的搜索表單中，當時，AJAX請求應該在每個關鍵事件上發送，搜索關鍵字作爲查詢字符串。搜索鍵將是輸入框中的值。如何避免keyup事件的連續ajax請求的開銷？

如果用戶輸入「ABCD」，在這種情況下，前3個AJAX請求應該得到殺/取消，因爲在第四AJAX請求searchkey將是「ABCD」

$(document).ready(function(){ 
    $("#searchInput").keyup(function(){ 
     ajaxSearch($("#searchInput").val()); 
    }); 
});

在我打電話以下keyup事件「 ajaxSearch（）「函數。

function ajaxSearch(searchKey) { 
    $.ajax({ 
     type: "get", 
     url: "http://example.com/ajaxRequestHandler/", 
     data: "action=search&searchkey=" + searchKey 
    }).done(function() { 
     /* process response */ 
    }); 
}

來源

2014-12-03 Prashant M Bhavsar

var request; 
function ajaxSearch(searchKey) { 
    /* if request is in-process, kill it */ 
    if(request) { 
     request.abort(); 
    }; 

    request = $.ajax({ 
     type: "get", 
     url: "http://example.com/ajaxRequestHandler/", 
     data: "action=search&searchkey=" + searchKey 
    }).done(function() { 
     /* process response */ 

     /* response received, reset variable */ 
     request = null; 
    }); 
}

來源

2014-12-03 07:02:02

隨着阿圖爾Bhosale的答案仍有4個請求，當用戶鍵入「ABCD」。這只是一個輸入服務器速度和響應時間的問題。

使用超時會更好。在這種情況下，請求只發送，如果用戶「說完/採取超時」打字：

$("#searchInput").keyup(function(){ 
    var value = $(this).val(); 
    setTimeout(function() { ajaxSearch(value) }, 300); 
});

剛玩的超時。對我來說，300毫秒是好的...

來源

2015-04-27 16:07:49 user3142695

這將工作，但考慮如果服務器需要5秒鐘來返回數據，在這5秒內，您可以處理5000/300請求，這取決於按鍵延遲，這將導致所有如果處理不當，會出現一些問題。因此，當另一個鍵入事件被觸發時，您需要一種中止先前請求的方式。 – Mindless 2016-06-08 03:05:46

如何避免keyup事件的連續ajax請求的開銷？

回答

相關問題