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

Answer 2

此问题太早了，不，你不应该排队请求，而是中止它们。

我所做的是设置请求延迟并将输入传递给延迟函数

当每个请求到达它的延迟时，我检查当前输入字段并将其与存储的输入匹配。如果字符串与前一个字符串匹配，则发送请求，否则不发送。

这样，用户必须在发送任何请求之前停止写一段时间。

Answer 3

找到了一个简单的例子：

function change() {

  var val1 = document.getElementById('value1');
  var val2 = document.getElementById('value2');
  val2.value = val1.value;

}

<input type="text" id="value1" onkeyup="change();">
<input type="text" id="value2">

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

3 个答案: