Fire event after 2 seconds using javascript/jQuery

Shubh picture Shubh · Dec 23, 2013 · Viewed 13k times · Source

I have similar requirement like jquery-run-code-2-seconds-after-last-keypress.

Now, when I use @brad code, it works fine when i do :-

$('input.username').keypress(debounce(function (event) {
    console.log('Search keypress');
}, 250));

But not when :-

$('#search').keypress(function () {
    debounce(function (event) {
        console.log('Search keypress');
   }, 2000);
});

Fiddle here. Any help would be really appretiated.

Edit:-

Initially I was doing something like below, which is not what I want-

$('#search').keypress(function () {
    setTimeout(function () {
      console.log('Search keypress');
    }, 3000);
});

Edit 2:- I want something very similar to below:- (Copied text from there )

At the moment after 3 characters are entered it will search on every key press.

What I want is

Case1:
User enters tes
2 seconds pass search performed


Case2:
User enters tes
1 second pass
user presses t
2 seconds pass
search is performed on test

Case3:
User enters tes
1 second passes
user presses t
1.5 seconds pass
user presses i
1.5 seconds pass
user presses n
1.5 seconds pass
user presses g
2 seconds pass
search in performed on testing

so as you can see, the search action is only performed when there has been no key presses(or pastes ect) in the two seconds following a key press.

my basic idea is to.

on keydown Call a function that sets a timeout, the function also sets a variable containing the last entry in the textbox. when the timeout expires it checks the value in the box to see if it matches the value in the variable.

Answer

A. Wolff picture A. Wolff · Dec 23, 2013

To debounce it using timeout:

{ BTW, use keyup event instead of keypress, delete key doesn't fire keypress event, see: http://www.quirksmode.org/js/keys.html }

DEMO

var timer;
$('#search').keyup(function () {
    clearTimeout(timer);
    timer = setTimeout(function (event) {

        console.log('Search keypress');
        var text = $('#search').val();

        $('#textTobeSearched').text(text);
    }, 2000);
});