animate - jquery settimeout

Idiomatic jQuery evento retrasado(solo después de una breve pausa al escribir)(también conocido como timewatch/typewatch/keywatch)

Question

Aquí hay un jQuery para un cuadro de búsqueda que espero que sea realmente un antipatrón, y estoy seguro de que hay una solución mucho mejor para la que me gustaría que me apuntaran:

Lo describiré en comentarios y luego solo daré el código, ya que los comentarios pueden ser más claros y simples que el código:

• // configura una llamada de función al presionar una tecla.
• // la llamada a la función tiene un retraso antes de que ocurra el evento principal.
• // Cuando se llama a la función de pulsación de teclas, borre todos los eventos previamente en cola y cree uno nuevo con la tasa de retraso estándar.
• // Usa un global para almacenar el puntero setTimeout.
• // clearTimeout cualquier puntero preexistente.
• // Comienza un nuevo retraso.

El código:

 // set up a filter function call on keypress.
$(''#supplier-select-filter'').keypress(function (){
// Currently, resets a delay on an eventual filtering action every keypress.
filterSuppliers(.3, this);
});
// Delayed filter that kills all previous filter request.
function filterSuppliers(delay, inputbox){
if(undefined != typeof(document.global_filter_trigger)){
clearTimeout(document.global_filter_trigger);
// clearTimeout any pre-existing pointers.
}
// Use a global to store the setTimeout pointer.
document.global_filter_trigger = setTimeout(function (){
var mask = $(inputbox).val();
$(''#user_id'').load("supplier.php?action=ajax_getsuppliers_html&mask="+escape(mask));
}, 1000*delay);
// Finally, after delay is reached, display the filter results.
}

Los problemas:

En un cuadro de entrada donde un término de búsqueda puede constar de 10 caracteres en promedio, son 10 llamadas a setTimeout en medio segundo, que parece ser un procesador pesado, y en mis pruebas está causando algunos problemas de rendimiento, así que espero que haya un limpiador ¿alternativa?

.load () es más simple que tomar JSON y luego generar html desde json, pero ¿tal vez hay una herramienta mejor?

.keypress () no parece activarse siempre en cosas como eliminación de retroceso y otros elementos esenciales, por lo que quizás usar la tecla () en este cuadro de entrada no sea el ideal.

Answer 1

Con frecuencia utilizo el siguiente enfoque, una función simple para ejecutar una devolución de llamada, después de que el usuario haya dejado de escribir durante un período de tiempo específico:

$(selector).keyup(function () {
typewatch(function () {
// executed only 500 ms after the last keyup event.
}, 500);
});

Implementación:

var typewatch = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();

Creo que este enfoque es muy simple y no implica ninguna variable global.

Para usos más sofisticados, eche un vistazo al complemento jQuery TypeWatch .

Answer 2

Eche un vistazo al excelente plugin Text Change Event de Zurb, proveedores de productos jQuery de la más alta calidad.

Answer 3

Esta es una forma más buena de hacerlo, sin usar el complemento:

var timeout;
$(''input[type=text]'').keypress(function() {
if(timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(myFunction, 5000)
})