Cancelar las solicitudes AJAX en vuelo utilizando Jquery .ajax?

Question

Duplicar posible:
Kill Ajax requests using JavaScript using jQuery

Aquí está el código simple que estoy trabajando con:

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

Esencialmente, si un evento keyup se dispara antes de que vuelva la función obtainFriendlist un resultado (y desencadena UIDisplayFriends (msg), necesito cancelar la solicitud en vuelo. El problema que he estado teniendo es que ellos ld up, y de repente la función UIDisplayFriends se dispara repetidamente.

Muchas gracias, y el asesoramiento es útil también

Answer 1

El valor de retorno de $.ajax es un objeto XHR que puede llamar en acciones. Para abortar la función que haría algo como:

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

Puede ser inteligente para añadir un poco de supresión de rebotes así a aliviar la carga en el servidor. Lo siguiente solo enviará una llamada XHR solo después de que el usuario haya dejado de escribir durante 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); 
}); 

Una tercera cosa que realmente debe hacer es filtrar las respuestas XHR en función de si o no la solicitud sigue siendo válida:

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

¿Cómo sobre el uso de una variable, por ejemplo isLoading, que se establece a través de cierto uso de la opción beforeSend (jqXHR, ajustes) para .ajax, y luego usar el completa la configuración para volver a establecer la variable en falso. ¿Entonces solo valida con esa variable antes de activar otra llamada 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; } 
    }); 
}