How to throttle callback of jQuery event?

Question

Ok, so I do search like in google, you type text in input and it gives you entries instantly. But I don't like that. I use something like that $("TEXTINPUT").keyup(function() {. When the user types very fast, it connects to database many times. Is it possible, that we would connect to PHP file only when user stops typing for 1-2 seconds, but not instantly? I need to do that in jQuery. Thanks.

Answer 1

If you use the Underscore Library it's as simple as this:

$("TEXTINPUT").keyup(_.throttle(function () {...}, 150));

Docs from the Underscore site:

throttle   _.throttle(function, wait)

Returns a throttled version of the function, that, when invoked repeatedly, will only actually call the wrapped function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

There is also the debounce function:

debounce   _.debounce(function, wait)

Calling a debounced function will postpone its execution until after wait milliseconds have elapsed since the last time the function was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized...

Answer 2

Try :

var time_out;
$("TEXTINPUT").keyup(function(){
    clearTimeout(time_out);
    time_out = setTimeout(your_function, 500);
}

function your_function()
{
    /*CHECK DATABASE*/
}