Jquery Run code 2 seconds after last keypress

Question

I am working on a auto search function for a site.

It uses ajax to query an api.

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.

If they match then there has been no change. So do the search

If they dont then do nothing, because the timeout from the subsequent key press will be following to do the same check.

Is this the only/best way to do this?

Numinous

Answer 1

The following function from Remy Sharp will do the trick:

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 500);
    };
}

In the preceding code, f is the function you would like to throttle and delay is the number of milliseconds to wait after the last call (defaults to 500 if omitted). throttle returns a wrapper function that clears any existing timeouts from previous calls and then sets a timeout for delay milliseconds in the future to call f. A reference to the arguments of the returned function is used to call f with, ensuring f receives the arguments it is expecting.

You should use it as follows:

$('#search').keyup(throttle(function(){
    // do the search if criteria is met
}));

Robalo

Sure thing, I added an explanation in an edit. Let me know if you still need clarification on anything. =) – Robalo

Works like a charm. Thank you @Robalo – Alejandraalejandrina

Answer 2

Almost the same except that timer is set only when conditions are met:

<input id="search" type="text" />
<script>
    var timer, value;
    $('#search').bind('keyup', function() {
        clearTimeout(timer);
        var str = $(this).val();
        if (str.length > 2 && value != str) {
            timer = setTimeout(function() {
                value = str;
                console.log('Perform search for: ', value);
            }, 2000);
        }
    });
</script>

Lev