jQuery value change event delay

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() {    ...}