Throttle AJAX Request On KeyUp and Paste Events

Question

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.

Answer 1

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.