Javascript 如何避免键控事件上连续ajax请求的开销？

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

如果用户输入“ABCD”，在这种情况下，前3个AJAX请求应该得到kill/cancel，因为在第4个AJAX请求中，搜索键将是“ABCD”

在keyup事件中，我调用以下“ajaxSearch（）”函数

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

---

当用户输入“ABCD”时，Atul Bhosale的回答仍然有四个请求。这只是服务器的输入速度和响应时间的问题

最好使用超时。在这种情况下，如果用户“完成/超时”键入：

---

只是玩一下暂停时间。对于我来说，300毫秒很好…

可以避免多个ajax请求；我们可以参考和实现一个debounce函数，如中所述，它对debounce函数的实现有一些很好的见解。去盎司功能只会在几分之一秒触发一次，而不是触发时的速度。它当然有助于限制连续的网络请求

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var ajaxSearch = debounce(function(searchKey) {
 //send an AJAX network request.
    $.ajax({
        type: "get",
        url: "http://example.com/ajaxRequestHandler/",
        data: "action=search&searchkey=" + searchKey
    }).done(function() {
        /* process response */
    });
 //250 indicates the minimum time interval between the series of events being fired
}, 250);

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

---

这是可行的，但考虑到服务器返回数据需要5秒钟，在这5秒钟内，您可以处理5000/300个请求，具体取决于键控延迟，如果处理不当，将导致各种问题。因此，您需要一种在触发另一个keyup事件时中止前一个请求的方法。

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

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

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var ajaxSearch = debounce(function(searchKey) {
 //send an AJAX network request.
    $.ajax({
        type: "get",
        url: "http://example.com/ajaxRequestHandler/",
        data: "action=search&searchkey=" + searchKey
    }).done(function() {
        /* process response */
    });
 //250 indicates the minimum time interval between the series of events being fired
}, 250);

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