Intentando agregar demora a jQuery Solicitud AJAX

Question

Estoy intentando retrasar una solicitud AJAX para que se envíe 2-3 segundos después de la última activación de una celda de entrada.
Hasta ahora he logrado retrasar las solicitudes, pero después de 2-3 segundos recibo una solicitud para cada keyup en el campo ...
¿Cómo puedo hacer que jQuery cancele los primeros y simplemente envíe la última clave?
Aquí está el código hasta ahora:

$('#lastname').focus(function(){ 
      $('.terms :input').val(""); //clears other search fields 
}).keyup(function(){ 
    caps(this); //another function that capitalizes the field 
    $type = $(this).attr("id"); // just passing the type of desired search to the php file 
     setTimeout(function(){ // setting the delay for each keypress 
       ajaxSearchRequest($type); //runs the ajax request 

     }, 1000); 
}); 

Este código anterior, espera 1 seg a continuación, envía 4-5 peticiones AJAX dependiendo de las pulsaciones de teclas. Solo quiero una enviada después de la última keyup
He encontrado algunas soluciones similares en StackOverflow que usan Javascript, pero no he podido implementarlas en mi proyecto debido a mi pequeño conocimiento de programación.

[SOLUCIONADO] código de trabajo final, gracias a @ Dr.Molle:

$('#lastname').focus(function(){ 
      $('.terms :input').val(""); 
}).keyup(function(){ 
    caps(this); 
    $type = $(this).attr("id"); 

    window.timer=setTimeout(function(){ // setting the delay for each keypress 
      ajaxSearchRequest($type); //runs the ajax request 

     }, 3000); 

}).keydown(function(){clearTimeout(window.timer);}); 

Aquí está el código ajaxSearchRequest:

function ajaxSearchRequest($type){ 
       var ajaxRequest2; // The variable that makes Ajax possible! 

       try{ 
        // Opera 8.0+, Firefox, Safari 
        ajaxRequest2 = new XMLHttpRequest(); 
       }catch (e){ 
        // Internet Explorer Browsers 
        try{ 
        ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP"); 
        }catch (e) { 
        try{ 
        ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP"); 
        }catch (e){ 
        // Something went wrong 
        alert("Browser error!"); 
        return false; 
        } 
        } 
       } 

       ajaxRequest2.onreadystatechange = function(){ 
        if(ajaxRequest2.readyState == 4){ 

         $result = ajaxRequest2.responseText; 
         $('#resultcontainer').html($result); 

        }} 


       var searchterm = document.getElementById($type).value; 


       var queryString ="?searchterm=" + searchterm +"&type=" +$type; 


       if(searchterm !== ""){ 

       ajaxRequest2.open("GET", "searchrequest.php" + 
           queryString, true); 
       ajaxRequest2.send(null); 
       } 
     } 

Answer 1

tienda el tiempo de espera en una variable, por lo que será capaz para borrar los tiempos de espera recientes:

clearTimeout(window.timer); 
window.timer=setTimeout(function(){ // setting the delay for each keypress 
       ajaxSearchRequest($type); //runs the ajax request 

     }, 3000); 

Answer 2

Me gusta la Molle's an Swer pero me gustaría mejorar aún más el rendimiento

var ajaxRequest2; // The variable that makes Ajax possible! 
function getAjaxObject() 
{ 
       try{ 
        // Opera 8.0+, Firefox, Safari 
        ajaxRequest2 = new XMLHttpRequest(); 
       }catch (e){ 
        // Internet Explorer Browsers 
        try{ 
        ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP"); 
        }catch (e) { 
        try{ 
        ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP"); 
        }catch (e){ 
        // Something went wrong 
        alert("Browser error!"); 
        // return false; 
        } 
        } 
       } 
    return ajaxRequest2; 


} 
    getAjaxObject(); 

    function ajaxSearchRequest($type){ 



       if(typeof ajaxRequest2 =="undefined" || ajaxRequest2 == false) 
       { 
        return; 
       } 
       ajaxRequest2.abort(); 

       ajaxRequest2.onreadystatechange = function(){ 
        if(ajaxRequest2.readyState == 4){ 

         $result = ajaxRequest2.responseText; 
         $('#resultcontainer').html($result); 

        }} 


       var searchterm = document.getElementById($type).value; 


       var queryString ="?searchterm=" + searchterm +"&type=" +$type; 


       if(searchterm !== ""){ 

       ajaxRequest2.open("GET", "searchrequest.php" + 
           queryString, true); 
       ajaxRequest2.send(null); 
       } 
     } 

Este cambio abortar un curso una petición Ajax y enviar una nueva solicitud. Es útil cuando se

Typed-> esperó 4 seg -> solicitud enviada -> mecanografiado de nuevo (la respuesta no se ha recibido) -> esperó 4 de segunda> fuegos otra solicitud

Answer 3

Lo que estamos tratando de hacer que se llama antirrebote.

Aquí hay un jquery plugin de Ben Alman que hace el trabajo.

Y underscore.js incluye esta funcionalidad también.

Realmente hay sin necesidad de hackear el sistema de solicitud de Ajax. Solo asegúrate de que se llame en el momento correcto.