javascript - Throttle AJAX Request On KeyUp and Paste Events - Stack Overflow

admin管理员组

文章数量:1313616

So I am calling an AJAX request on every keyup and paste event in jQuery on a textbox:

 $("#server-label").bind("keyup paste", function() {
     $.ajax()...
 });

The problem is this is just too many AJAX requests if the user rapidly presses keys. What is the best way to sort of wait until the users stops typing for a bit (say 500ms) before calling the AJAX request. Basically don't make the AJAX request until no keys or paste events fired for 500ms.

Thanks.

So I am calling an AJAX request on every keyup and paste event in jQuery on a textbox:

 $("#server-label").bind("keyup paste", function() {
     $.ajax()...
 });

The problem is this is just too many AJAX requests if the user rapidly presses keys. What is the best way to sort of wait until the users stops typing for a bit (say 500ms) before calling the AJAX request. Basically don't make the AJAX request until no keys or paste events fired for 500ms.

Thanks.

• javascript
• jquery
• ajax

Share Improve this question Follow asked May 5, 2012 at 0:29 JustinJustin 45.4k8383 gold badges213213 silver badges310310 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

Try using setTimeout() and a timer var to keep track of it:

var t;
$("#server-label").on("keyup paste", function() {
    clearTimeout(t);
    t = setTimeout(function() {
        $.ajax({/*[...]*/});
        //...
    }, 500);
});

You can also use throttle or debounce but I don't think it'd be necessary if you wrap your code inside a function object or string to pass to the setTimeout() function.

本文标签： javascriptThrottle AJAX Request On KeyUp and Paste EventsStack Overflow