When a key is pressed, when a stop after X seconds calls the call function

Question

I have a text input and a text box, and I pass the value from the input to the text box. I try to do when you enter something into the input and stop, after 2 seconds, display the values ​​in the text box.

In this example, the text field instantly receives an input value:

http://jsfiddle.net/DXMG6/

So, I want, when you enter and stop, after 2 seconds, specify the value.

How can i achieve this? I tried to use setTimeout , but when 2 seconds passed, it instantly gets the value. So basically it works for the first 2 seconds.

Answer 1

You must reset the timer each time the user presses a key again:

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

Answer 2

Once I created 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 as a normal bind method, but the last argument is the delay before the handler starts (in a mile of a second):

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

See the script: http://jsfiddle.net/c82Ye/2/

And you untie and run it, as usual:

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

Answer 3

setTimeout returns the identifier of the "job". you need to make clearTimeout (id) each 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 the timeout, and save the resulting timeout id . Then you need to check if the timeout id has been saved with every key press. If the timeout is set, clear the timeout and reset it. Something like that:

 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 script:

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

Answer 5

I updated your fiddle

This will update the textarea value 2 seconds after text editing is complete.

The relevant part is this: we save the timeout link when the keyup event keyup , we clear the previous timeout, and we start a new timeout that fires after 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 every 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 change 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); });