¿Cómo retrasar el controlador .keyup () hasta que el usuario deje de escribir?

Tengo un campo de búsqueda. Ahora mismo busca todas las teclas. Entonces, si alguien escribe "Windows", hará una búsqueda con AJAX para cada tecla: "W", "Wi", "Win", "Wind", "Windo", "Window", "Windows".

Quiero tener un retraso, por lo que solo busca cuando el usuario deja de escribir durante 200 ms.

No hay ninguna opción para esto en el keyup función, y lo he intentado setTimeout, pero no funcionó.

¿Cómo puedo hacer eso?

preguntado el 15 de diciembre de 09 a las 15:12

Si pudiera, cerraría esto como duplicado. -

No veo el daño de tener duplicados, siempre que las respuestas dadas y aceptadas sean correctas. Agregar a la base de datos de preguntas debe ser algo bueno y algo por lo que luchar. -

El daño es que las personas en el futuro no podrán beneficiarse de las respuestas brillantes que todos comparten si hay 100 de la misma pregunta, por lo que cerrar los engaños y redirigir a todos a la pregunta original es mejor para encontrar las mejores prácticas y soluciones. Ver stackoverflow.com/help/duplicates para obtener más información sobre por qué se cierran los duplicados. -

Este es mucho más popular que el que supuestamente estaba duplicando. Está mejor redactado, tiene mejores respuestas, ocupa un lugar más alto en Google, etc. Muchos se han beneficiado de esta respuesta. En retrospectiva, habría sido una pena que esto estuviera cerrado. Hay algunos triviales que son malos como duplicados, pero esto no entra en esa categoría. -

28 Respuestas

Utilizo esta pequeña función para el mismo propósito, ejecutando una función después de que el usuario ha dejado de escribir durante un período de tiempo específico o en eventos que se disparan a una velocidad alta, como resize:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

Cómo funciona:

La delay La función devolverá una función envuelta que maneja internamente un temporizador individual, en cada ejecución el temporizador se reinicia con el retardo de tiempo proporcionado, si ocurren múltiples ejecuciones antes de que pase este tiempo, el temporizador simplemente se reiniciará y comenzará de nuevo.

Cuando el temporizador finalmente termina, se ejecuta la función de devolución de llamada, pasando el contexto y los argumentos originales (en este ejemplo, el objeto de evento de jQuery y el elemento DOM como this).

ACTUALIZACIÓN 2019-05-16

He vuelto a implementar la función utilizando las funciones ES5 y ES6 para entornos modernos:

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

La implementación se cubre con un conjunto de pruebas.

Para algo más sofisticado, eche un vistazo a jQuery Tipo de reloj .

Respondido el 20 de junio de 20 a las 10:06

Otra alternativa: github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js. Funciona prácticamente de la misma manera que lo describiste, me encontré usando mucho ese patrón, así que lo implementé como un complemento de jQuery para simplificar la sintaxis. Aquí hay una página de demostración: briangrinstead.com/files/bindWithDelay - Brian Grinstead

Inicialmente codifiqué la cantidad de letras escritas, este enfoque es suave como la melaza (sin azufre) - tener

Cuando uso esto con $ .post (), envía todo lo escrito al mismo tiempo, pero lo envía tantas veces como tuve una tecla. ¿Hay alguna forma de enviar SOLO cuando se agota el tiempo de espera? - ntglimpiador

Pero esto no funciona si llamo a dos o más funciones diferentes que requieren un retraso individual. Hice esta solución en su lugar stackoverflow.com/a/30503848/1834212 - Miguel

Recomiendo el complemento 'bindWithDelay' vinculado en el comentario superior. Pero sugiero la respuesta de @ Hazerider a esta pregunta (a continuación - stackoverflow.com/a/19259625/368896), que es mejor que esta respuesta y vale la pena estudiarla para comprender la idea detrás de un enlace simple y hábil para permitir diferentes temporizadores para diferentes elementos, el mismo principio utilizado en el código del complemento anterior, pero más fácil de entender. - dan nissenbaum

Si desea buscar después de que el tipo haya terminado, use una variable global para mantener el tiempo de espera devuelto por su setTimout llamar y cancelarlo con un clearTimeout si aún no ha sucedido para que no active el tiempo de espera excepto en el último keyup evento

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

O con una función anónima:

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}   

Respondido 15 Oct 12, 23:10

Otra ligera mejora en la respuesta de CMS. Para permitir fácilmente retrasos separados, puede utilizar lo siguiente:

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

Si desea reutilizar el mismo retraso, simplemente haga

var delay = makeDelay(250);
$(selector1).on('keyup', function() {delay(someCallback);});
$(selector2).on('keyup', function() {delay(someCallback);});

Si desea retrasos separados, puede hacerlo

$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});

Respondido 08 Oct 13, 23:10

Es interesante que la solución con más de 600 votos a favor al día en que escribo este comentario no sea tan buena como esta respuesta con solo 2 votos a favor (incluido el mío). Claramente superior, porque admite múltiples widgets que pueden compartir o no compartir el retraso. Excelente respuesta. - dan nissenbaum

... Aunque el complemento jQuery en el comentario debajo de la respuesta también maneja temporizadores separados para elementos separados, y también agrega argumento de acelerador y evento: github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js. El enfoque general de ese complemento es el mismo que el de su código, por lo que vale la pena estudiarlo detenidamente para comprenderlo por su simplicidad antes de intentar comprender el complemento más sofisticado. Sin embargo, recomiendo ese complemento, pero si no necesita el acelerador o la transferencia de datos de eventos, ¡su código es excelente! Dos buenas opciones. ¡Gracias! - dan nissenbaum

Hmm, se demora para mí pero someApiCall todavía se dispara varias veces, ahora solo con el valor final del campo de entrada. - roelante

También puedes mirar underscore.js, que proporciona métodos de utilidad como rebote:

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Respondido 21 Abr '16, 23:04

Lo mismo también está disponible en Lodash: lodash.com/docs/#debounce - Adarsh ​​Madrecha

Basado en la respuesta de CMS, hice esto:

Ponga el código a continuación después de incluir jQuery:

/*
 * delayKeyup
 * http://code.azerti.net/javascript/jquery/delaykeyup.htm
 * Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
 * Written by Gaten
 * Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
 */
(function ($) {
    $.fn.delayKeyup = function(callback, ms){
        var timer = 0;
        $(this).keyup(function(){                   
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        });
        return $(this);
    };
})(jQuery);

Y simplemente usa así:

$('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);

Cuidado: la variable $ (this) en la función pasada como parámetro no coincide con la entrada

respondido 13 mar '12, 15:03

Explicación

Utilice una variable para almacenar la función de tiempo de espera. Entonces usa clearTimeout() para borrar esta variable de cualquier función de tiempo de espera activa, y luego use setTimeout() para volver a configurar la función de tiempo de espera activo. Corremos clearTimeout() primero, porque si un usuario está escribiendo "hola", queremos que nuestra función se ejecute poco después de que el usuario presione la tecla "o" (y no una vez por cada letra).

Demo de trabajo

Enfoque súper simple, diseñado para ejecutar una función después de que un usuario haya terminado de escribir en un campo de texto ...

    $(document).ready(function(e) {
        var timeout;
        var delay = 2000;   // 2 seconds

        $('.text-input').keyup(function(e) {
            $('#status').html("User started typing!");
            if(timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(function() {
                myFunction();
            }, delay);
        });

        function myFunction() {
            $('#status').html("Executing function for user!");
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Status: <span id="status">Default Status</span><br>
<textarea name="text-input" class="text-input"></textarea>

Respondido 18 Feb 21, 04:02

Retrasar llamadas multifunción usando etiquetas

Esta es la solución con la que trabajo. Retrasará la ejecución de CUALQUIER función que desee. Puede ser la consulta de búsqueda de teclado, tal vez el clic rápido en los botones anterior o siguiente (que, de lo contrario, enviarían múltiples solicitudes si se hace clic rápidamente de forma continua y no se usarán después de todo). Esto usa un objeto global que almacena cada tiempo de ejecución y lo compara con la solicitud más actual.

Entonces, el resultado es que solo se llamará al último clic / acción, porque esas solicitudes se almacenan en una cola, que después de X milisegundos se llama si no existe ninguna otra solicitud con la misma etiqueta en la cola.

function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  delayed_methods[label]=""; callback();}}, time||500);
  }

Puede configurar su propio tiempo de retardo (es opcional, el valor predeterminado es 500 ms). Y envíe los argumentos de su función en forma de "cierre".

Por ejemplo, si desea llamar a la función de abajo:

function send_ajax(id){console.log(id);}

Para evitar múltiples solicitudes send_ajax, las retrasa mediante:

delay_method( "check date", function(){ send_ajax(2); } ,600);

Cada solicitud que usa la etiqueta "verificar fecha" solo se activará si no se realiza ninguna otra solicitud en el período de tiempo de 600 milisegundos. Este argumento es opcional

Independencia de etiqueta (llamando a la misma función de destino) pero ejecute ambas:

delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});

Resulta en llamar a la misma función, pero las retrasa de forma independiente debido a que sus etiquetas son diferentes

Respondido el 08 de enero de 19 a las 11:01

Si a alguien le gusta retrasar la misma función, y sin una variable externa, puede usar el siguiente script:

function MyFunction() {

    //Delaying the function execute
    if (this.timer) {
        window.clearTimeout(this.timer);
    }
    this.timer = window.setTimeout(function() {

        //Execute the function code here...

    }, 500);
}

Respondido el 07 de enero de 16 a las 10:01

Me gusta este. No es exactamente reutilizable pero fácil de entender. - Vincent

jQuery:

var timeout = null;
$('#input').keyup(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
      console.log($(this).val());
  }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="input" placeholder="Type here..."/>

Javascript puro:

let input = document.getElementById('input');
let timeout = null;

input.addEventListener('keyup', function (e) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        console.log('Value:', input.value);
    }, 1000);
});
<input type="text" id="input" placeholder="Type here..."/>

Respondido el 29 de enero de 20 a las 01:01

Esta función extiende un poco la función de la respuesta de Gaten para recuperar el elemento:

$.fn.delayKeyup = function(callback, ms){
    var timer = 0;
    var el = $(this);
    $(this).keyup(function(){                   
    clearTimeout (timer);
    timer = setTimeout(function(){
        callback(el)
        }, ms);
    });
    return $(this);
};

$('#input').delayKeyup(function(el){
    //alert(el.val());
    // Here I need the input element (value for ajax call) for further process
},1000);

http://jsfiddle.net/Us9bu/2/

Respondido el 25 de Septiembre de 12 a las 14:09

Me sorprende que nadie mencione el problema con la entrada múltiple en los muy buenos recortes de CMS.

Básicamente, tendría que definir la variable de retardo individualmente para cada entrada. De lo contrario, si sb pone texto en la primera entrada y salta rápidamente a otra entrada y comienza a escribir, devuelva la llamada para la primera NO ¡ser llamado!

Vea el código a continuación con el que vine basado en otras respuestas:

(function($) {
    /**
     * KeyUp with delay event setup
     * 
     * @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
     * @param function callback
     * @param int ms
     */
    $.fn.delayKeyup = function(callback, ms){
            $(this).keyup(function( event ){
                var srcEl = event.currentTarget;
                if( srcEl.delayTimer )
                    clearTimeout (srcEl.delayTimer );
                srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
            });

        return $(this);
    };
})(jQuery);

Esta solución mantiene la referencia setTimeout dentro de la variable delayTimer de la entrada. También pasa la referencia del elemento a la devolución de llamada como sugirió fazzyx.

Probado en IE6, 8 (comp - 7), 8 y Opera 12.11.

Respondido el 17 de diciembre de 12 a las 12:12

He intentado esto, pero no puedo trabajar correctamente en la primera activación. - Lars Thoren

Esto funcionó para mí cuando retrasé la operación lógica de búsqueda y verifico si el valor es el mismo que el ingresado en el campo de texto. Si el valor es el mismo, sigo adelante y realizo la operación para los datos relacionados con el valor de búsqueda.

$('#searchText').on('keyup',function () {
    var searchValue = $(this).val();
    setTimeout(function(){
        if(searchValue == $('#searchText').val() && searchValue != null && searchValue != "") {
           // logic to fetch data based on searchValue
        }
        else if(searchValue == ''){
           // logic to load all the data
        }
    },300);
});

Respondido el 10 de junio de 14 a las 19:06

no funciona como se esperaba - el número de recuperaciones es el mismo, solo retrasado por los 300ms - necesita usar la función clearTimeout () en cada pulsación de tecla, antes de ejecutar setTimeout () - Picard

Bueno, no es necesario utilizar clearTimeout en este caso. La condición searchValue == $ ('# searchText'). Val () dentro de setTimeout asegurará si el valor es el mismo que hace 300ms. Déjame saber si esto tiene sentido. Gracias. - Sagar Gala

Función de retardo para llamar en cada tecla. Se requiere jQuery 1.7.1 o superior

jQuery.fn.keyupDelay = function( cb, delay ){
  if(delay == null){
    delay = 400;
  }
  var timer = 0;
  return $(this).on('keyup',function(){
    clearTimeout(timer);
    timer = setTimeout( cb , delay );
  });
}

Uso: $('#searchBox').keyupDelay( cb );

respondido 21 mar '17, 09:03

Esta es una solución en la línea de CMS, pero resuelve algunos problemas clave para mí:

  • Admite múltiples entradas, los retrasos pueden ejecutarse al mismo tiempo.
  • Ignora los eventos clave que no cambiaron el valor (como Ctrl, Alt + Tab).
  • Resuelve una condición de carrera (cuando se ejecuta la devolución de llamada y el valor ya ha cambiado).
var delay = (function() {
    var timer = {}
      , values = {}
    return function(el) {
        var id = el.form.id + '.' + el.name
        return {
            enqueue: function(ms, cb) {
                if (values[id] == el.value) return
                if (!el.value) return
                var original = values[id] = el.value
                clearTimeout(timer[id])
                timer[id] = setTimeout(function() {
                    if (original != el.value) return // solves race condition
                    cb.apply(el)
                }, ms)
            }
        }
    }
}())

Uso:

signup.key.addEventListener('keyup', function() {
    delay(this).enqueue(300, function() {
        console.log(this.value)
    })
})

El código está escrito en un estilo que disfruto, es posible que deba agregar un montón de punto y coma.

Cosas para tener en cuenta:

  • Se genera una identificación única basada en la identificación del formulario y el nombre de entrada, por lo que deben estar definidos y ser únicos, o puede ajustarlo a su situación.
  • retrasar devuelve un objeto que es fácil de ampliar para sus propias necesidades.
  • El elemento original utilizado para el retraso está vinculado a la devolución de llamada, por lo que this funciona como se esperaba (como en el ejemplo).
  • El valor vacío se ignora en la segunda validación.
  • Cuidado con En cola, espera milisegundos primero, prefiero eso, pero es posible que desee cambiar los parámetros para que coincidan setTimeout.

La solución que utilizo agrega otro nivel de complejidad, permitiéndote cancelar la ejecución, por ejemplo, pero esta es una buena base sobre la que construir.

Respondido 18 Jul 13, 10:07

Combinando Respuesta CMS con El de miguel produce una solución robusta que permite retrasos simultáneos.

var delay = (function(){
    var timers = {};
    return function (callback, ms, label) {
        label = label || 'defaultTimer';
        clearTimeout(timers[label] || 0);
        timers[label] = setTimeout(callback, ms);
    };
})();

Cuando necesite retrasar diferentes acciones de forma independiente, utilice el tercer argumento.

$('input.group1').keyup(function() {
    delay(function(){
        alert('Time elapsed!');
    }, 1000, 'firstAction');
});

$('input.group2').keyup(function() {
    delay(function(){
        alert('Time elapsed!');
    }, 1000, '2ndAction');
});

Respondido el 29 de enero de 16 a las 14:01

Sobre la base de la respuesta de CMS, aquí hay un nuevo método de demora que conserva 'esto' en su uso:

var delay = (function(){
  var timer = 0;
  return function(callback, ms, that){
    clearTimeout (timer);
    timer = setTimeout(callback.bind(that), ms);
  };
})();

Uso:

$('input').keyup(function() {
    delay(function(){
      alert('Time elapsed!');
    }, 1000, this);
});

Respondido el 08 de diciembre de 17 a las 21:12

Utiliza

mytimeout = setTimeout( expression, timeout );

donde expresión es la secuencia de comandos que se ejecutará y el tiempo de espera es el tiempo de espera en milisegundos antes de que se ejecute; esto NO afecta la secuencia de comandos, sino que simplemente retrasa la ejecución de esa parte hasta que se agota el tiempo de espera.

clearTimeout(mytimeout);

restablecerá / borrará el tiempo de espera para que no ejecute el script en expresión (como una cancelación) siempre que aún no se haya ejecutado.

Respondido el 15 de diciembre de 09 a las 18:12

Según la respuesta de CMS, simplemente ignora los eventos clave que no cambian de valor.

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

var duplicateFilter=(function(){
  var lastContent;
  return function(content,callback){
    content=$.trim(content);
    if(content!=lastContent){
      callback(content);
    }
    lastContent=content;
  };
})();

$("#some-input").on("keyup",function(ev){

  var self=this;
  delay(function(){
    duplicateFilter($(self).val(),function(c){
        //do sth...
        console.log(c);
    });
  }, 1000 );


})

Respondido 19 ago 13, 03:08

Desde ES6, uno puede usar sintaxis de la función de flecha también.

En este ejemplo, el código se retrasa keyup evento durante 400 ms después de que los usuarios terminen de escribir antes de llamar searchFunc hacer una solicitud de consulta.

const searchbar = document.getElementById('searchBar');
const searchFunc = // any function

// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() => {
    let timer = null;
    const delay = (func, ms) => {
        timer ? clearTimeout(timer): null
        timer = setTimeout(func, ms)
    }
    return delay
})();

searchbar.addEventListener('keyup', (e) => {
    const query = e.target.value;
    delayKeyUp(() => {searchFunc(query)}, 400);
})

Respondido el 21 de Septiembre de 18 a las 06:09

Use el vincular con retraso Complemento jQuery:

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

respondido 04 mar '12, 11:03

var globalTimeout = null;  
$('#search').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
});
function SearchFunc(){  
  globalTimeout = null;  
  console.log('Search: '+$('#search').val());
  //ajax code
};

Respondido 15 Oct 13, 04:10

Aquí hay una sugerencia que he escrito que se ocupa de múltiples entradas en su formulario.

Esta función obtiene el Objeto del campo de entrada, ingrese su código

function fieldKeyup(obj){
    //  what you want this to do

} // fieldKeyup

Esta es la función delayCall real, se ocupa de múltiples campos de entrada

function delayCall(obj,ms,fn){
    return $(obj).each(function(){
    if ( typeof this.timer == 'undefined' ) {
       // Define an array to keep track of all fields needed delays
       // This is in order to make this a multiple delay handling     
          function
        this.timer = new Array();
    }
    var obj = this;
    if (this.timer[obj.id]){
        clearTimeout(this.timer[obj.id]);
        delete(this.timer[obj.id]);
    }

    this.timer[obj.id] = setTimeout(function(){
        fn(obj);}, ms);
    });
}; // delayCall

Uso:

$("#username").on("keyup",function(){
    delayCall($(this),500,fieldKeyup);
});

Respondido el 10 de diciembre de 13 a las 08:12

Usuario lodash biblioteca javascript y use la función _.debounce

changeName: _.debounce(function (val) {
  console.log(val)                
}, 1000)

Respondido el 10 de enero de 19 a las 13:01

Echa un vistazo a la autocompletar enchufar. Sé que te permite especificar un retraso o un número mínimo de caracteres. Incluso si no terminas usando el complemento, revisar el código te dará algunas ideas sobre cómo implementarlo tú mismo.

Respondido el 15 de diciembre de 09 a las 18:12

Bueno, también hice un fragmento de código para limitar la solicitud ajax de alta frecuencia por Keyup / Keydown. Mira esto:

https://github.com/raincious/jQueue

Haz tu consulta así:

var q = new jQueue(function(type, name, callback) {
    return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.

Y vincula un evento como este:

$('#field-username').keyup(function() {
    q.run('Username', this.val(), function() { /* calling back */ });
});

respondido 13 nov., 13:16

Vi esto hoy un poco tarde, pero solo quiero poner esto aquí en caso de que alguien más lo necesite. simplemente separe la función para que sea reutilizable. el código siguiente esperará 1/2 segundo después de escribir detener.

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });

Respondido el 01 de junio de 16 a las 01:06

// Get an global variable isApiCallingInProgress

//  check isApiCallingInProgress 
if (!isApiCallingInProgress) {
// set it to isApiCallingInProgress true
      isApiCallingInProgress = true;

      // set timeout
      setTimeout(() => {
         // Api call will go here

        // then set variable again as false
        isApiCallingInProgress = false;     
      }, 1000);
}

respondido 28 nov., 19:09

Si desea hacer algo después de un período de tiempo y restablecer ese temporizador después de un evento específico como keyup, la mejor solución está hecha con clearTimeout y setTimeout métodos:

// declare the timeout variable out of the event listener or in global scope
var timeout = null;

$("#some-id-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});

respondido 05 mar '21, 18:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.