javascript - eventos - onkeypress enter

¿Cómo desencadenar un evento onkeyup que se retrasa hasta que un usuario pausa su tipado?

Question

Tengo un área de texto donde las personas ingresan texto (naturalmente), y quiero hacerlo para que se haga una solicitud de AJAX de vez en cuando para obtener sugerencias sobre el tema de texto (como Preguntas relacionadas con el desbordamiento de pila, pero para un textarea, no una entrada de texto). El problema es que no puedo hacer una solicitud de AJAX en cada pulsación de tecla (sería inútil y consume muchos recursos), y no estoy seguro de cuál sería la forma más eficiente de hacerlo (cada X palabras? Cada X segundos ? ¿o algo mas?).

¿Cuál sería la mejor manera de hacer esto?

Gracias de antemano.

Answer 1

Lo que estás buscando se llama debouncing . Aquí hay un algoritmo genérico en JavaScript nativo:

function debounce(fn, duration) {
  var timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, duration)
  }
}

Y aquí hay un ejemplo de cómo usarlo con un evento onkeyup :

function debounce(fn, duration) {
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(fn, duration);
  }
}

$(function(){
  
  $(''#txtSearch'').on(''keyup'', debounce(function(){
  
    alert(''You paused your typing!'');
    
  }, 500));
  
});

input{
  padding:.5em;
  font-size:16px;
  width:20em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtSearch" placeholder="Type here" />

Answer 2

Otra alternativa es usar un pequeño complemento jQuery llamado bindWithDelay . Utiliza la misma técnica setTimeout que tiene la respuesta aceptada, pero maneja los tiempos de espera de forma transparente para que su código sea un poco más fácil de leer. El código fuente se puede ver en github.

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000)

Answer 3

Si está interesado en las soluciones jQuery , jQuery Suggest es una buena implementación.

No tiene sentido reinventar la rueda todo el tiempo.

Answer 4

Si está utilizando esta funcionalidad mucho en el sitio y no quiere hacer un seguimiento de todos los refs de setTimeout, etc, lo empaqué en un complemento disponible here .

El complemento agrega algunas opciones al método normal $ .ajax para almacenar y cancelar llamadas ajax anteriores.

Answer 5

Si está utilizando underscore.js, puede usar la función antirrebote .

Ejemplo (jQuery utilizado para la tecla):

$(''#myTextArea'').keyup(_.debounce(function(){
    alert(''hello'');
}, 500));

Answer 6

Yo personalmente usaría un setInterval que monitorearía los cambios en el área de texto y solo realizaría devoluciones de llamada AJAX cuando detecta un cambio. cada segundo debe ser lo suficientemente rápido y lento.

Answer 7

Puede combinar un controlador de eventos de keypress con setTimeout para enviar una solicitud Ajax durante un tiempo determinado después de presionar una tecla, cancelar y reiniciar el temporizador si se produce otra pulsación de tecla antes de que termine el temporizador. Suponiendo que tiene un área de texto con id ''myTextArea'' y una función de devolución de llamada Ajax llamada doAjaxStuff :

function addTextAreaCallback(textArea, callback, delay) {
    var timer = null;
    textArea.onkeypress = function() {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout( function() {
            timer = null;
            callback();
        }, delay );
    };
    textArea = null;
}

addTextAreaCallback( document.getElementById("myTextArea"), doAjaxStuff, 1000 );