On keypress, when stop after X seconds call function

Question

I have a text input and a textarea and I'm passing the value from the input to the textarea. I am trying to do, when you type something in the input and you stop, after 2 seconds show the values to the textarea.

In this example the textarea gets the input's value instantly:

http://jsfiddle.net/DXMG6/

So i want, when you type and stop, after 2 seconds give the value.

How can I achieve this? I tried to use setTimeout but when the 2 seconds pass, then it keeps getting the value instantly. So basically it works for the first 2 seconds.

Answer 1

You have to reset the timer everytime the user presses the key again:

jQuery(function($){

   function changeFn(){
      alert('Changed');
   } 


   var timer;

   $("#string").bind("keyup", function(){
      clearTimeout(timer);
      timer = setTimeout(changeFn, 2000)
   });

});

Answer 2

Once i made this plugin called bindDelay for jQuery:

$.fn.bindDelay = function( eventType, eventData, handler, timer ) {
    if ( $.isFunction(eventData) ) {
        timer = handler;
        handler = eventData;
    }
    timer = (typeof timer === "number") ? timer : 300;
    var timeouts;
    $(this).bind(eventType, function(event) {
        var that = this;
        clearTimeout(timeouts);
        timeouts = setTimeout(function() {
            handler.call(that, event);
        }, timer);
    });
};

Used like a normal bind method but the last argument is the delay before firing the handler (in mil sec):

 $("input").bindDelay('keyup', function() {
     $("textarea").text( $(this).val() );
 }, 2000);

See fiddle: http://jsfiddle.net/c82Ye/2/

And you unbind and trigger it like normal:

$("input").unbind("keyup");
$("input").trigger("keyup");

Answer 3

setTimeout returns an ID of the "job". what you have to do is to clearTimeout(id) every type and setTimeout again:

var tID = null;
onclick() {
    if (tID !== null) clearTimeout(tID);
    tID = setTimeout(function() { /*Do domething*/ }, 2000);
}

Answer 4

What you need to do is set a timeout, and save the resulting timeout id. Then you need to check if the timeout id has been saved at each keypress. If the timeout is set, clear the timeout and reset it. Something like this:

var timeoutId = null;
var myFunc = function() {
    timeoutId = null;
    // Do stuff
};
var myEventHandler = function() {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
    }
    timeoutId = window.setTimeout(myFunc, 2000);
};

...or check the updated fiddle:

http://jsfiddle.net/DXMG6/5/

Answer 5

I've updated your fiddle

This will update the textarea value 2 seconds after you end editing the text.

The relevant part is this: we keep a reference to a timeout, when the keyup event is fired we clear the previous timeout and we start a new timeout, that will fire in 2 seconds.

var timeout = null;
$("#string").on("keyup keypress paste mouseup", function () {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        // ... your code here
    }, 2000);
});

Answer 6

Try something like this. Use setTimeout, but each time a key is pressed, reset the timer and start over...

http://jsfiddle.net/DXMG6/10/

var textTimer=null;

$("#string").on("keyup keypress paste mouseup", function () { 
    if (textTimer) clearTimeout(textTimer);
    textTimer = setTimeout(function(){
        var a = $('#string').val();
        $('#rdonly').html(a);
    }, 2000);

});
$('.btn').click(function() {
    $('#rdonly').text('');
    $('#string').val('');
});

Answer 7

You just need to modify your code as follows:

var timeoutId = 0;
$("#string").on("keyup keypress paste mouseup", function () { 
    var a = $('#string').val();
    // Cancel existing timeout, if applicable
    if (timeoutId > 0) {
        window.clearTimeout(timeoutId);
    }
    // Start a timeout for 2 seconds- this will be cancelled above
    // if user continues typing
    timeoutId = window.setTimeout(function () {
        $('#rdonly').html(a);
    }, 2000);
});