2012-07-03 40 views
7

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:Intentando agregar demora a jQuery Solicitud AJAX

$('#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); 
       } 
     } 
+0

publique el código de 'ajaxSearchRequest' – Imdad

+0

@Imdad ¿por qué es necesario? Ya puede ver cada tecla haciendo un nuevo tiempo de espera sin cancelar las anteriores. – Esailija

+0

Hay otro trabajo alrededor. Solo puedo decir si sé cuál es la función – Imdad

Respuesta

15

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); 
+0

Te daré un +1 cuando lo hagas sin almacenar ese valor en una variable global ... – Alnitak

+0

¿Dónde lo almacenarías? –

+0

puede usar un cierre. – Christoph

-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

+0

¿Sé por qué está downvoted? – Imdad

+0

porque es una mala respuesta? Las solicitudes de anulación no ayudan: los servidores (por lo general) siguen procesando consultas. La solución correcta es no seguir enviando solicitudes. – Alnitak

+0

Pero, disminuye la sobrecarga de red. Y resuelve el problema de obtener respuestas múltiples si te tardas un poco en escribir. – Imdad

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.

+0

lo compruebo mal, gracias – krasatos

Cuestiones relacionadas