Jquery .ajax를 사용하여 기내 AJAX 요청을 취소 하시겠습니까?

Question

가능한 중복 :

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

기본적으로 keyUp 이벤트는 함수 obtainFriendlist 반환되기 전에 해고하는 경우 : 다음
Kill Ajax requests using JavaScript using jQuery

내가 함께 일하고 간단한 코드입니다 결과 (그리고 UIDisplayFriends (msg)를 트리거하면, 기내 요청을 취소해야합니다. 내가 가지고 있었던 문제는 그들이 bui ld up, 갑자기 함수 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

어떻게 변수를 사용하는 방법에 대한, 당신은 아약스의 beforeSend (jqXHR, 설정) 옵션을 사용하여 다음 사용을 통해 true로 설정하는 것이, isLoading 말 변수를 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; } 
    }); 
}