Question

I’m sending an ajax request to the server on user’s input to an <input> element, like this:

$('#my-input').bind("input", function(event){
   // here's the ajax request
});

What bothers me is that it send unnecessarily many requests on every user’s keyup, meaning that if the user types very fast, there are many unnecessary requests. So I get the idea that there should be a certain delay/timeout, which waits a certain time (50 miliseconds?) for the user to stop typing before sending the ajax request. That would be one problem solved.

But what about cases when the first ajax request haven’t been completed before sending another request? (Typing 60 ms / char while ajax request taking 300 ms).

What is the best way to solve this problem (both idea- and code-based)?

Answer 1

You can use throttle function in underscore library. As its documentation says:

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

Even if you don’t want to introduce a new library, you can still get idea about how this function works from its source code. In fact, a simple version of throttle function could be:

function throttle(func, delay) {
    var timeout = null;
    return function() {
        var that = this, args = arguments;
        clearTimeout(timer);
        timeout = setTimeout(function() {
            func.apply(that, args);
        }, delay);
    };
}

This jQuery throttle-debounce plugin is also helpful. Especially, the debounce function seems more suitable to your needs than throttle function according to its author:

Debouncing can be especially useful for rate limiting execution of handlers on events that will trigger AJAX requests