Sending jQuery ajax request on keyboard input

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)?

Are you trying to capture every key stroke, or would you prefer to just capture the end message (blur)? — sgeddes
– sgeddes, Commented Jan 12, 2013 at 5:19
@sgeddes: I don't want every capture, I want the end message, BUT there is no blur at the end (the user doesn't have to unclick the area). — Frantisek
– Frantisek, Commented Jan 12, 2013 at 5:21
is only capturing enter an option? or ignoring backspace - don't know if that will actually helpmuch though — Scott Selby
– Scott Selby, Commented Jan 12, 2013 at 6:00

Hui Zheng · Accepted Answer · 2013-01-12 05:56:45Z

3

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

edited Jan 12, 2013 at 5:56

answered Jan 12, 2013 at 5:21

Hui Zheng

10.2k2 gold badges37 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Frantisek Over a year ago

I don't think this is the best way to solve this problem. The library seems very unnecessary to me.

Hui Zheng Over a year ago

If you use JS intensively, this library is your good friend. Anyway, you can just get code snippet from its source.

sgeddes Over a year ago

But why introduce a new library when setTimeout is available with jQuery? Throttling doesn't seem appropriate for this scenario...

Hui Zheng Over a year ago

@sgeddes First, setTimeout is JS built-in function, not jQuery-specific. Secondly, as I said, you don't have to introduce new library, that function implementation is not long, just copy&paste. Lastly, I updated my answer and suggested another library, where debounce may be more suitable than throttle.

wickedone · Accepted Answer · 2013-02-01 15:33:03Z

1

You could just use the setTimeout function. Every so often, see if the text hasn't changed, and if it hasn't, then process accordingly.

setTimeout(function() {
      // Do something after 1 second
}, 1000);

edited Feb 1, 2013 at 15:33

wickedone

5401 gold badge6 silver badges18 bronze badges

answered Jan 12, 2013 at 5:26

sgeddes

62.9k7 gold badges67 silver badges85 bronze badges

2 Comments

Frantisek Over a year ago

Yes, this solves the first part of the problem, but not the overlaying ajax requests.

sgeddes Over a year ago

That may be something you'll have to resolve server-side. Queue up the requests before submitting to the db. Several different implementations out there.

Kinjal Bagaria · Accepted Answer · 2013-01-12 06:18:27Z

0

You can set async: false in your ajax request so it will process second ajax call only after completion of first ajax request.

answered Jan 12, 2013 at 6:18

Kinjal Bagaria

462 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:24:48Z

0

I'd go with @HuiZeng's answer, but just in case you want a slightly modified version.

Steps

Listen to keydown using a setTimeout that you can clear.
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)
 }

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jan 12, 2013 at 8:07

Jibi Abraham

4,6962 gold badges33 silver badges60 bronze badges

Collectives™ on Stack Overflow

Sending jQuery ajax request on keyboard input

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related