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 área de texto, 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 hacerlo?

Gracias de antemano.

Answer 1

Puede combinar un controlador de eventos keypress con para enviar una solicitud Ajax una cantidad de tiempo establecida después de una pulsación de tecla, cancelar y reiniciar el temporizador si se produce otra pulsación de tecla antes de que termine el temporizador. Asumiendo 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); 

Answer 2

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

No tiene sentido reinventar la rueda cada vez.

Answer 3

Usaría personalmente un setInterval que controlaría los cambios en el área de texto y solo realizaría devoluciones de llamada AJAX cuando detecte que se realiza un cambio. cada segundo debe ser lo suficientemente rápido y lento.

Answer 4

Otra alternativa es utilizar un pequeño plugin 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 source code se puede ver en github.

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

Answer 5

Si está utilizando esta funcionalidad mucho alrededor del sitio y no desea hacer un seguimiento de todos los árbitros, etc. entonces SetTimeOut i envasados ​​esto en un plugin disponible here.

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

Answer 6

Si está utilizando underscore.js puede usar el debounce function.

Ejemplo (jQuery utiliza para keyup):

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

Answer 7

Lo que estamos buscando se llama debouncing. Aquí es un algoritmo genérico en JavaScript orígenes:

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

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

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" />