Jquery .ajax를 사용하여 진행 중인 AJAX 요청을 취소하시겠습니까?

Jquery .ajax를 사용하여 진행 중인 AJAX 요청을 취소하시겠습니까?

이 질문에는 이미 답변이 있습니다.

닫힘11년 전에요.

중복 가능성:
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)를 트리거하기 전에), 실행 중인 요청을 취소해야 합니다.최근 문제가 되고 있는 것은, 그들이 쌓이면, 갑자기 UIDisplayFriends 함수가 반복해 버립니다.

감사합니다, 조언도 도움이 됩니다.

의 반환값$.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);
       }
     });
}

변수 isLoading을 사용하면 .ajax의 beforeSend(jqXHR, settings) 옵션을 사용하여 true로 설정한 후 완전한 설정을 사용하여 변수를 false로 되돌릴 수 있습니다.그럼 다른 에이잭스 콜을 트리거하기 전에 그 변수와 대조해서 검증하는 건가요?

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

언급URL : https://stackoverflow.com/questions/8023881/cancel-in-flight-ajax-requests-using-jquery-ajax