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: 
You can use [throttle](http://documentcloud.github.com/underscore/#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](http://documentcloud.github.com/underscore/docs/underscore.html). 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](http://benalman.com/projects/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
> 
> 
>
I'd go with [@HuiZeng's answer](https://stackoverflow.com/a/14290516/1177441), but just in case you want a slightly modified version.

Steps

1. Listen to keydown using a setTimeout that you can clear.
2. When it fires, check if you have a previous request in queue, if so abort it and fire a new one

Example:

```
var inputTimer = 0, req;

function onInput(e){
      clearTimeout(inputTImer);
      inputTimer = setTimeout( function(){
           // You have access to e here
           // Cancel any previous requests
           req && req.abort();
           req = $.ajax({/*...Do your magic here :)*/})
      }, 100)
 }

```