Fire event after 2 seconds using javascript/jQuery

Question

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 1

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);
});

Answer 2

UPDATE: Here is with debounce at 2 seconds (wait 2 seconds): fiddle

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

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

---

use setTimeout

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

Answer 3

debounce returns a function to be called. When used directly in the keypress() function, that returned function is your event handler. However, in your second code, you debounce the function but never actually call it.

debounce(function(event) {console.log("Search keypress");},2000)();