Anulowanie żądań AJAX podczas lotu za pomocą Jquery .ajax?

Question

Powiel możliwe:
Kill Ajax requests using JavaScript using jQuery

Oto prosty kod pracuję z:

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

Zasadniczo, jeśli zdarzenie keyup jest zwolniony przed powrotem funkcja obtainFriendlist wynik (i uruchamia UIDisplayFriends (msg), muszę anulować żądanie podczas lotu. Problem, który miałem, polega na tym, że oni ld w górę, a następnie nagle wielokrotnie uruchamiana jest funkcja UIDisplayFriends.

Dziękuję bardzo dużo, a rada jest też pomocny

Answer 1

Wartość zwracana $.ajax jest obiektem XHR że można zadzwonić na akcje. Aby przerwać tę funkcję, można zrobić coś w rodzaju:

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

To może być mądre, aby dodać kilka opisów, aby zmniejszyć obciążenie serwera. Następujące wywołają wywołanie XHR tylko po tym, jak użytkownik przestał pisać przez 100 ms.

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

Trzecią rzeczą, że należy być naprawdę robi jest filtrowanie odpowiedzi XHR podstawie tego, czy wniosek jest nadal ważna:

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

Jak o użyciu zmiennej, powiedzmy isLoading, że wartość true za pomocą opcji beforeSend (jqXHR Ustawienia) za .ajax, a następnie za pomocą pełne ustawienie, aby ustawić zmienną z powrotem na false. Następnie wystarczy sprawdzić poprawność wobec tej zmiennej, zanim wyzwolisz inne wywołanie 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; } 
    }); 
}