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)
})