如何避免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请求的开销？

回答

相关问题