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

php javascript jquery ajax

2022-08-30 12:45:30

可能的重复：
使用jQuery使用JavaScript杀死Ajax请求

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

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

从本质上讲，如果在函数 getFriendlist 返回结果（并触发 UIDisplayFriends（msg））之前触发了一个 keyup 事件，我需要取消正在进行的请求。我一直遇到的问题是它们会建立起来，然后突然反复触发UIDisplayFriends功能。

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

答案 1

的返回值是可以对其调用操作的 XHR 对象。要中止该函数，您可以执行如下操作：$.ajax

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

添加一些去抖动以减轻服务器上的负载也可能是明智的。只有在用户停止键入 100 毫秒后，以下操作才会发送 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);
       }
     });
}

答案 2

使用一个变量，比如 isLoading，通过使用 .ajax 的 beforeSend（jqXHR， settings）选项设置为 true，然后使用完整设置将变量设置回 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; }
     });
}