Debouncing
Debouncing delays the handler until the user stops typing for a specified time — essential for search-as-you-type to reduce AJAX requests.
jQuery
Intermediate
4 min read
Debouncing Input Events
Example
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
$("#search").on("input", debounce(function() {
$.getJSON("/api/search?q=" + $(this).val(), function(results) {
renderResults(results);
});
}, 300)); Pro Tip
300ms is a good debounce delay for search inputs — fast enough to feel responsive.