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

onkeyup javascript ejemplo

Question

Tengo un campo de búsqueda. En este momento se busca para cada keyup. 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 se busca cuando el usuario deja de escribir por 200 ms.

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

¿Cómo puedo hacer eso?

Answer 1

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

Esta función obtiene el objeto del campo de entrada, puesto en 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);
});

Answer 2

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://.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 use así:

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

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

Answer 3

Basado en 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 );


})

Answer 4

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

https://github.com/raincious/jQueue

Haga su consulta de esta manera:

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 atar evento como este:

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

Answer 5

Desde ES6 , también se puede utilizar la sintaxis de la función de flecha .

En este ejemplo, el código retrasa el evento keyup durante keyup ms después de que los usuarios terminen de escribir antes de llamar a searchFunc realizar 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);
})

Answer 6

Echa un vistazo al complemento de autocomplete . Sé que le 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.

Answer 7

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 ...

<script type="text/javascript">
$(document).ready(function(e) {
    var timeout;
    var delay = 2000;   // 2 seconds

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

    function myFunction() {
        console.log("Executing function for user!");
    }
});
</script>

<textarea name="text-input" class="text-input"></textarea>

Answer 8

Esta es una solución similar a la de los CMS, pero me soluciona algunos problemas clave:

• Soporta múltiples entradas, los retrasos pueden ejecutarse concurrentemente.
• Ignora 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 puntos y coma.

Cosas a 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 definidas y ser únicas, o puede ajustarlas a su situación.
• retardo devuelve un objeto que es fácil de extender para sus propias necesidades.
• El elemento original utilizado para el retraso está vinculado a la devolución de llamada, por this funciona como se esperaba (como en el ejemplo).
• El valor vacío se ignora en la segunda validación.
• Tenga cuidado con la puesta en cola , primero espera milisegundos, lo prefiero, pero es posible que desee cambiar los parámetros para que coincidan con setTimeout .

La solución que uso agrega otro nivel de complejidad, que le permite cancelar la ejecución, por ejemplo, pero esta es una buena base sobre la cual construir.

Answer 9

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/

Answer 10

Esto me funcionó cuando demoré la operación de búsqueda lógica y verifico si el valor es el mismo que el ingresado en el campo de texto. Si el valor es el mismo, continúo y realizo la operación de 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);
});

Answer 11

Función de retardo para llamar en cada keyup. jQuery 1.7.1 o superior requerido

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

Answer 12

La combinación de la respuesta de CMS con la 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, use 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'');
});

Answer 13

Me sorprende que nadie mencione el problema con la entrada múltiple en el muy buen contenido de CMS.

Básicamente, tendría que definir la variable de retardo individualmente para cada entrada. De lo contrario, si sb coloca el texto en la primera entrada y salta rápidamente a otra entrada y comienza a escribir, la devolución de llamada para la primera NO SE LLAMARÁ !

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

(function($) {
    /**
     * KeyUp with delay event setup
     * 
     * @link http://.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 de 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.

Answer 14

Otra ligera mejora en la respuesta de CMS. Para permitir fácilmente demoras separadas, puede usar lo siguiente:

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

Si desea reutilizar el mismo retardo, simplemente haga

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

Si quieres retrasos separados, puedes hacerlo.

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

Answer 15

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

Answer 16

Si desea buscar después de que el tipo haya terminado, use una variable global para mantener el tiempo de espera devuelto desde su llamada a setTimout y cancele con un clearTimeout si aún no ha ocurrido para que no se dispare el tiempo de espera, excepto en la última 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);  
}   

Answer 17

Sobre la base de la respuesta de CMS, aquí hay un nuevo método de retardo 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);
});

Answer 18

También puede mirar underscore.js , que proporciona métodos de utilidad como la debounce :

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

Answer 19

Utilice el plugin briangrinstead.com/files/bindWithDelay jQuery:

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

Answer 20

Utilizar

mytimeout = setTimeout( expression, timeout );

donde expresión es la secuencia de comandos para ejecutar y tiempo de espera es el tiempo para esperar en milisegundos antes de que se ejecute, esto NO interrumpe la secuencia de comandos, sino que simplemente retrasa la ejecución de esa parte hasta que finalice el tiempo de espera.

clearTimeout(mytimeout);

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

Answer 21

Utilizo esta pequeña función para el mismo propósito, ejecutando una función después de que el usuario haya dejado de escribir durante un período de tiempo específico o en eventos que se activen 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 función de delay devolverá una función envuelta que maneja internamente un temporizador individual. En cada ejecución, el temporizador se reinicia con el tiempo de demora proporcionado. Si se producen varias ejecuciones antes de que pase este tiempo, el temporizador simplemente se reiniciará y comenzará nuevamente.

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

Para algo más sofisticado, eche un vistazo al complemento jQuery Typewatch .

Answer 22

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 hacerla reutilizable. el siguiente código esperará 1/2 segundo después de escribir stop.

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

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

Answer 23

Retrasar las llamadas multifuncionales usando etiquetas

Esta es la solución con la que trabajo. Retrasará la ejecución en CUALQUIER función que desee . Puede ser la consulta de búsqueda clave, tal vez el clic rápido en los botones anterior o siguiente (que de lo contrario enviaría una solicitud múltiple si se hace clic continuamente de forma continua y no se utiliza después de todo). Esto utiliza 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 los 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{  callback();}}, time||500);
  }

Puede configurar su propio tiempo de retardo (su opcional, predeterminado es de 500 ms). Y envíe sus argumentos de función en una "moda de cierre".

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

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

Para evitar múltiples solicitudes de send_ajax, puede retrasarlas usando:

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

Cada solicitud que use la etiqueta "fecha de verificación" solo se activará si no se realiza ninguna otra solicitud en el plazo de 600 milisegundos. Este argumento es opcional

Independencia de la etiqueta (llamando a la misma función de destino) pero ejecuta ambos:

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

Los resultados al llamar a la misma función, pero los retrasan de forma independiente debido a que sus etiquetas son diferentes

Answer 24

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