Throttle and Debounce
Rate-limit expensive event handlers. Debounce fires once after quiet; throttle fires at most once per interval.
jQuery
Intermediate
4 min read
Throttle and Debounce
Example
// Debounce: search input (fire after user stops typing)
let debounceTimer;
$("#search").on("input", function() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => { doSearch($(this).val()); }, 300);
});
// Throttle: scroll/resize handler (fire at most once per 100ms)
let lastScroll = 0;
$(window).on("scroll", function() {
if (Date.now() - lastScroll > 100) {
lastScroll = Date.now();
updateStickyNav($(this).scrollTop());
}
}); Pro Tip
For search, debounce by 300ms — enough pause to avoid searching on every keystroke.