pulsada - Código de ejecución de Jquery 2 segundos después de la última pulsación de tecla

on keyup jquery

Question

Estoy trabajando en una función de búsqueda automática para un sitio.

Utiliza ajax para consultar una api.

En el momento en que se ingresen 3 caracteres, buscará cada vez que se presione una tecla.

Lo que quiero es

Caso 1:
El usuario entra en tes
2 segundos de búsqueda de pases realizados

Caso2:
El usuario entra en tes
1 segundo pase
el usuario presiona t
2 segundos pasan
la búsqueda se realiza en la prueba
Case3:
El usuario entra en tes
1 segundo pasa
el usuario presiona t
1.5 segundos pasan
el usuario presiona i
1.5 segundos pasan
el usuario presiona n
1.5 segundos pasan
el usuario presiona g
2 segundos pasan
búsqueda realizada en pruebas

Como puede ver, la acción de búsqueda solo se realiza cuando no se han presionado (o pegado ect) las teclas dos segundos después de presionar una tecla.

Mi idea básica es

on keydown Llame a una función que establece un tiempo de espera, la función también establece una variable que contiene la última entrada en el cuadro de texto. cuando el tiempo de espera expira, comprueba el valor en el cuadro para ver si coincide con el valor en la variable.

Si coinciden, entonces no ha habido ningún cambio. Así que la búsqueda

Si no lo hacen, entonces no hacen nada, porque el tiempo de espera de la tecla posterior se seguirá para realizar la misma comprobación.

¿Es esta la única / mejor manera de hacer esto?

Answer 1

Casi lo mismo, excepto que el temporizador se establece solo cuando se cumplen las condiciones:

<input id="search" type="text" />
<script>
    var timer, value;
    $(''#search'').bind(''keyup'', function() {
        clearTimeout(timer);
        var str = $(this).val();
        if (str.length > 2 && value != str) {
            timer = setTimeout(function() {
                value = str;
                console.log(''Perform search for: '', value);
            }, 2000);
        }
    });
</script>

Answer 2

La siguiente función de Remy Sharp hará el truco:

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 500);
    };
}

En el código anterior, f es la función que le gustaría acelerar y la delay es el número de milisegundos que hay que esperar después de la última llamada (el valor predeterminado es 500 si se omite). throttle devuelve una función de envoltorio que borra cualquier tiempo de espera existente de las llamadas anteriores y luego establece un tiempo de espera de milisegundos de delay en el futuro para llamar a f . Se utiliza una referencia a los arguments de la función devuelta para llamar a f , asegurando que f reciba los argumentos que espera.

Deberías usarlo de la siguiente manera:

$(''#search'').keyup(throttle(function(){
    // do the search if criteria is met
}));