jQuery value change event delay

I want to execute a function like 2 seconds after a user has finished typing in the textbox. If they continue to type after 1 second, the delay time is reset back to 2.

It should function something similar to an autocomplete box.

I know of 2 events: change and keyup. The p开发者_如何学编程roblem I have with change is that the textbox has to loose focus for it to be triggered. for keyup, what if they use the mouse to paste a text?

Could I be helped here?

---

There's the HTML5 oninput event, supported by all the current major browsers and can be worked into IE 8 and lower:

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

• http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript (explanation)
• http://whattheheadsaid.com/projects/input-special-event (plugin)

---

A very simple cross browser approach would be

$("#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));
});

This would make the event fire twice in IE 9 (one for propertychange, one for input), but it doesn't matter because of the nature of the event handler.

---

You can bind the input event and also keyup for fallback on older browsers. You can then start a timer, which gets reset every time a user action is detected. By saving the timer handle in the current element's data makes sure multiple elements don't interfere with each other.

$('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));
});

---

You can put on both change and keyup:

var globalTimeout;

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

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

function handler() {
    ...
}

---

I'd do it like this:

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

Cheers

---

keyup will work:

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

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