javascript - 如何避免 keyup 事件连续 ajax 请求的开销？

Question

例如在搜索表单中，当用户输入一些文本时，AJAX 请求应在每个 keyup 事件上发送，搜索键作为查询字符串。搜索键将是输入框中的值。

如果用户输入“ABCD”，在这种情况下，前 3 个 AJAX 请求应该被终止/取消，因为在第 4 个 AJAX 请求中，搜索键将是“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 */
    });
}

Answer 1

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;
    });
}