jQuery valor change event delay

Question

Quiero ejecutar una función como 2 segundos después de que un usuario haya terminado de escribir en el cuadro de texto. Si siguen escribiendo después de 1 segundo, el tiempo de retardo se restablece a 2.

Debería funcionar de forma similar a un cuadro de autocompletar.

Sé de 2 eventos: change y keyup. El problema que tengo con change es que el cuadro de texto tiene que perder el foco para que se dispare. para keyup, ¿qué pasa si usan el mouse para pegar un texto?

¿Me pueden ayudar aquí?

Answer 1

Ahí está el HTML5 oninput caso, con el apoyo de todos los principales navegadores actuales y se puede trabajar en el IE 8 e inferior:

$("#myInput").bind("input", function() { 
    // ... 
}) 

• http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript (explicación)
• http://whattheheadsaid.com/projects/input-special-event (plug-in)

---

Un navegador muy simple enfoque sería

$("#myInput").bind("input propertychange", function (evt) { 
    // If it's the propertychange event, make sure it's the value that changed. 
    if (window.event && event.type == "propertychange" && event.propertyName != "value") 
     return; 

    // Clear any previously set timer before setting a fresh one 
    window.clearTimeout($(this).data("timeout")); 
    $(this).data("timeout", setTimeout(function() { 
     // Do your thing here 
    }, 2000)); 
}); 

Esto haría que el fuego dos veces en caso de IE 9 (uno para propertychange, uno para input), pero no importa debido a la naturaleza del controlador de eventos.

Answer 2

Se puede poner tanto en el cambio y keyup:

var globalTimeout; 

$(function() { 
    $("#myInput").change(initTimer).keyup(initTimer); 
}); 

function initTimer() { 
    if (globalTimeout) clearTimeout(globalTimeout); 
    globalTimeout = setTimeout(handler, 2000); 
} 

function handler() { 
    ... 
} 

Answer 3

keyup funcionará:

$("#s").keyup(function(e){ 
    $("#t").html($(this).val()); 
}); 

jsFiddle: http://jsfiddle.net/3nx6t/

Answer 4

lo haría así:

$("selector").keyup(function(){ 
    if(typeof(window.delayer) != 'undefined') 
     clearTimeout(window.delayer); 
    window.delayer = setTimeout(function_you_want_to_get_execute_with_delay, 2000); 
}); 

Cheers

Answer 5

Puede enlazar el evento input y también keyup para realizar copias de seguridad en los navegadores anteriores. A continuación, puede iniciar un temporizador, que se restablece cada vez que se detecta una acción del usuario. Al guardar el controlador del temporizador en los datos del elemento actual, se asegura de que los elementos múltiples no interfieran entre sí.

$('input').bind('input keyup', function(){ 
    var $this = $(this); 
    var delay = 2000; // 2 seconds delay after last input 

    clearTimeout($this.data('timer')); 
    $this.data('timer', setTimeout(function(){ 
     $this.removeData('timer'); 

     // Do your stuff after 2 seconds of last user input 
    }, delay)); 
});