通过文本框中的keyup处理ajax的正确方法

Question

我正在使用jQuery ajax为用户提供一些可视化验证反馈.我有一个带有产品名称的文本框,因为用户输入(keyup)我的ajax函数检查服务器是否产品已存在,如果是,我显示不可用的div等等.你明白了.

它的工作原理很好,但很明显,如果你在完成时开始输入,就会有很多浪费和/或排队的请求.是否有一个javascript或jquery命令,我可以放入我的keyup函数,它将取消所有以前尚未完成的请求？

这甚至看起来像一个问题吗？或者这通常是如何以这种方式完成ajax？

(注意:我正在我的本地计算机上进行开发,因此每个ajax请求都需要最少1秒.无论如何,尽管它在网络上会更快,但我想知道处理这个问题的最佳方法.)

这里是ajax函数以及如何设置成功功能:

function groupValidation(a,b) {
$.ajax({
    type: "POST",
    url: "/WebService_VehicleDisplay.asmx/groupValidation",
    data: "{groupId:'" + a + "',name:'" + b + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        var response = msg.d;
        if (response == true) {
            $("#avail").hide();
            $("#notAvail").show();    
        } else {
            $("#avail").show();
            $("#notAvail").hide();
        }   
    }
});

}

Answer 1

您可以保留对先前XMLHttpRequest($.ajax()返回)的引用并将其中止,如下所示:

var xhr;                       //variable in a higher scope we can reference
function groupValidation(a,b) {
  if(xhr != null) xhr.abort(); //cancel previous request
  xhr = $.ajax({               //starting a request, keep a reference
    type: "POST",
    url: "/WebService_VehicleDisplay.asmx/groupValidation",
    data: "{groupId:'" + a + "',name:'" + b + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        xhr = null;            //clear it out, we finished, nothing to abort
        var response = msg.d;
        if (response == true) {
            $("#avail").hide();
            $("#notAvail").show();    
        } else {
            $("#avail").show();
            $("#notAvail").hide();
        }   
    }
  });
}