如何避免在 keyup 事件上连续 ajax 请求的开销

How to avoid overhead of continuous ajax request on keyup event?

本文关键字：ajax 请求 开销 连续 何避免 keyup 事件      更新时间：2023-09-26

例如，在搜索表单中，当用户输入一些文本时，此时，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 */
    });
}

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

为了避免多个 ajax 请求;我们可以参考并实现 David Walsh 博客文章中提到的去抖动函数。它从Underscore.js中获得了一些关于去抖动函数实现的深刻见解。去抖动功能只会每几分之一秒触发一次，而不是在触发后触发。它肯定有助于限制连续的网络请求。

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

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

最好使用超时。在这种情况下，如果用户键入"完成/超时"，则仅发送请求：

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

只需玩弄超时。对我来说，300ms很好...

相关文章：