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

Question

可能重复:
使用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);
       }
     });
}

基本上,如果在函数gainFriendlist返回结果之前触发了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);
       }
     });
}