2011-08-06 15 views
5

estoy usando el código (written by another user) siguiente para estrangular las peticiones Ajax en una función LiveSearch:del acelerador peticiones Ajax

jsFiddle si usted prefiere una demostración: http://jsfiddle.net/4xLVp/

Parece errores, sin embargo. Al borrar los valores con Ctrl+shift+back-arrow, y al volver a escribir se produce una ráfaga de solicitudes. Los valores en blanco también causan una solicitud. No parece correcto, especialmente en comparación con jQuery UI autocomplete, donde los retrasos en las solicitudes parecen más medidos.

$('##tag-search').keyup(function() { 
     var elem = $(this); 
     if (elem.val().length >= 2) { 
      elem.data('search',search).clearQueue().stop().delay(1000).queue(function() { 
       $.ajax({ // ajax stuff 
        'success': function(data){ /*show result*/ } 
       }); 
       if (elem.data('search') != string) return; 
      });            
     } else if (string.length <= 1) { /*show original content*/ } 
    }); 

¿Hay una mejor manera de manejar esto?

Respuesta

8

Yo sólo uso setTimeout:

(function() { 
    var timeout; 
    $('#tag-search').keyup(function() { 
     var elem = $(this); 
     if (elem.val().length >= 2) { 
      clearTimeout(timeout); 
      timeout = setTimeout(function() { 
       $.ajax({ // ajax stuff 
        'success': function(data){ /*show result*/ } 
       });  
      }, 80); // <-- choose some sensible value here          
     } else if (string.length <= 1) { /*show original content*/ } 
    }); 
}()); 

También hay un plugin debounce/throttle.

+0

Gracias. Eso es todo, me sorprende que sea así de simple. ¿Puede explicar qué hace clearTimeout() y por qué es necesario? – Mohamad

+0

setTimeout - establece un código que se ejecutará después de un tiempo, clearTimeout - elimina esa ejecución pendiente, es necesario borrar la solicitud anterior de ajax de peding antes de comenzar una nueva –

+0

BTW - No recomiendo la eliminación de 'if (elem.data (' search ')! = string) return; 'parte, evita que las llamadas ajax anteriores (que duren más) actualicen los resultados ya modificados –

Cuestiones relacionadas