使用Jquery .ajax取消正​​在进行的AJAX请求？

Question

  

可能重复：
  Kill Ajax requests using JavaScript using jQuery

以下是我正在使用的简单代码：

$("#friend_search").keyup(function() {

    if($(this).val().length > 0) {
        obtainFriendlist($(this).val());
    } else {
        obtainFriendlist("");
    }

});

function obtainFriendlist(strseg) {

    $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       data: "search="+strseg,
       success: function(msg){
        UIDisplayFriends(msg);
       }
     });
}

基本上，如果在函数obtainFriendlist返回结果之前触发了keyup事件（并触发了UIDisplayFriends（msg），我需要取消正在进行的请求。我遇到的问题是它们会建立，然后突然，UIDisplayFriends函数被反复触发。

非常感谢，建议也很有帮助

Answer 1

$.ajax的返回值是一个可以调用操作的XHR对象。要中止该功能，您可以执行以下操作：

var xhr = $.ajax(...)
...
xhr.abort()

添加一些去抖动以缓解服务器上的负载可能是明智之举。以下内容仅在用户停止输入100ms后才发送XHR呼叫。

var delay = 100,
    handle = null;

$("#friend_search").keyup(function() {
    var that = this;
    clearTimeout(handle);
    handle = setTimeout(function() {
        if($(that).val().length > 0) {
            obtainFriendlist($(that).val());
        } else {
            obtainFriendlist("");
        }
    }, delay);
});

您应该做的第三件事是根据请求是否仍然有效来过滤XHR响应：

var lastXHR, lastStrseg;

function obtainFriendlist(strseg) {
    // Kill the last XHR request if it still exists.
    lastXHR && lastXHR.abort && lastXHR.abort();

    lastStrseg = strseg;
    lastXHR = $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       data: "search="+strseg,
       success: function(msg){

        // Only display friends if the search is the last search.
        if(lastStrseg == strseg) 
          UIDisplayFriends(msg);
       }
     });
}

Answer 2

使用变量（例如isLoading）如何通过使用.ajax的beforeSend（jqXHR，settings）选项设置为true，然后使用complete设置将变量设置为false。那么你只需在触发另一个ajax调用之前验证该变量吗？

var isLoading = false;
$("#friend_search").keyup(function() {

    if (!isLoading) {
       if($(this).val().length > 0) {
           obtainFriendlist($(this).val());
       } else {
           obtainFriendlist("");
       }
    }

});

function obtainFriendlist(strseg) {

    $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       beforeSend: function () { isLoading = true; },
       data: "search="+strseg,
       success: function(msg){
        UIDisplayFriends(msg);
       },
       complete: function() { isLoading = false; }
     });
}