¿Cómo acelerar la devolución de llamada del evento jQuery?

Question

Ok, entonces busco en google, escribes texto en la entrada y te da entradas al instante. Pero no me gusta eso. Uso algo así $("TEXTINPUT").keyup(function() {. Cuando el usuario escribe muy rápido, se conecta a la base de datos muchas veces. ¿Es posible que nos conectemos al archivo PHP solo cuando el usuario deja de escribir durante 1-2 segundos, pero no instantáneamente? Necesito hacer eso en jQuery. Gracias.

Answer 1

Probar:

var time_out; 
$("TEXTINPUT").keyup(function(){ 
    clearTimeout(time_out); 
    time_out = setTimeout(your_function, 500); 
} 

function your_function() 
{ 
    /*CHECK DATABASE*/ 
} 

Answer 2

Así es como normalmente me lo planteo:

$(function(){ 
    var tiTO, jqXHR; 
    $('textinput').keyup(function(){ 
    if (tiTO) clearTimeout(tiTO); 
    if (jqXHR && jqXHR.abort) jqXHR.abort(); 
    tiTO = setTimeout(function(){ 
     jqXHR = $.ajax({....}); 
     //Ajax call to PHP 
    },2000); 
    }); 
}); 

Cada keyup restablece el tiempo de espera, y aborta cualquier ajax activo.

Answer 3

Si utiliza el Underscore Library Es tan simple como esto:

$("TEXTINPUT").keyup(_.throttle(function() {...}, 150));

Docs desde el sitio Subrayado:

acelerador     _.throttle (función, esperar)

Devuelve una versión estrangulado de la función, que, cuando se invoca en repetidas ocasiones, en realidad sólo se llame a la función ajustada como máximo una vez por cada esperar milisegundos. Es útil para eventos que limitan la velocidad que ocurren más rápido de lo que usted puede seguir.

También existe la función debounce:

antirrebote     _.debounce (función, espere)

Llamar a una función antirrebote pospondrá su ejecución hasta después de esperar milisegundos tienen transcurrido desde la última vez que se invocó la función . Útil para implementar el comportamiento que solo debería ocurrir después de que la entrada ha dejado de llegar. Por ejemplo: Representación de una vista previa un comentario de rebajas, volver a calcular un diseño después de la ventana ha dejado de ser redimensionada ...

Answer 4

Esta función actúa un poco como underscore.js, pero sin la dependencia adicional. También pasará el alcance y los argumentos con los que se llama a la función envuelta. A diferencia de la respuesta de YoannM, esto devuelve una devolución de llamada independiente que no utiliza variables externas (por ejemplo, use tantas veces como desee).

function throttle (func, wait) { 
    return function() { 
     var that = this, 
      args = [].slice(arguments); 

     clearTimeout(func._throttleTimeout); 

     func._throttleTimeout = setTimeout(function() { 
      func.apply(that, args); 
     }, wait); 
    }; 
} 

Y el uso sería casi idéntico al de la biblioteca underscore.js.

$('input').on('input keyup', throttle(function() { 
    // ... 
}, 100));