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.

use `setTimeout` with `keyup` fucntion – xkeshav Dec 03 '11 at 06:34 — xkeshav, Dec 03 '11 at 06:34
I can understand PHP tag here but mysql? – Your Common Sense Dec 03 '11 at 06:43 — Your Common Sense, Dec 03 '11 at 06:43

Jordan S. Jones · Answer 1 · 2011-12-03T06:53:34.533

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...

There's only one problem: what if you *just* need to throttle a callback? No one needs a library to do this—just a basic understanding of javascript in the browser. — Robert K, Aug 29 '12 at 19:56

score 12 · Accepted Answer · edited Jan 14 '13 at 13:54

12

Try :

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

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

edited Jan 14 '13 at 13:54

Felix Kling

795,719
175
1,089
1,143

answered Dec 03 '11 at 06:37

Yoann

3,020
1
24
34

score 4 · Answer 3 · answered Aug 29 '12 at 19:55

4

This function will act somewhat like underscore.js, but without the extra dependency. It'll also pass the scope and arguments it's called with to the wrapped function. Unlike YoannM's answer, this returns a self-contained callback that uses no external variables (EG, use as many times as you want).

function throttle (func, wait) {
    return function() {
        var that = this,
            args = [].slice(arguments);

        clearTimeout(func._throttleTimeout);

        func._throttleTimeout = setTimeout(function() {
            func.apply(that, args);
        }, wait);
    };
}

And usage would be nearly identical to that of the underscore.js library.

$('input').on('input keyup', throttle(function() {
    // ...
}, 100));

answered Aug 29 '12 at 19:55

Robert K

30,064
12
61
79

I think this is debouncing, not throttling behaviour – Chris Panayotoff Nov 10 '14 at 10:06
1

That's a good point; I wasn't very clear on debounce vs throttle distinctions when I answered the question. The irony of it is, that was an adaptation of underscore's "throttle" function. @ХристоПанайотов perhaps you could clarify: http://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function (No particularly good answer there.) – Robert K Nov 10 '14 at 14:06

score 0 · Answer 4 · answered Dec 03 '11 at 06:36

Here's how I usually approach it:

$(function(){
  var tiTO, jqXHR;
  $('textinput').keyup(function(){
    if (tiTO) clearTimeout(tiTO);
    if (jqXHR && jqXHR.abort) jqXHR.abort();
    tiTO = setTimeout(function(){
      jqXHR = $.ajax({....});
      //Ajax call to PHP
    },2000);
  });
});

Each keyup resets the timeout, and aborts any active ajax.

How to throttle callback of jQuery event?

4 Answers4

Linked

Related