Explain the concept of debouncing and throttling
By FrontendPro Editorial Team Updated 8/8/2026
Answer
Debouncing and throttling are techniques used to control the rate at which a function is executed. Debouncing ensures that a function is only called after a specified delay has passed since the last time it was invoked. Throttling ensures that a function is called at most once in a specified time interval.
Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
const debouncedHello = debounce(() => console.log("Hello world!"), 2000);
debouncedHello(); // Prints 'Hello world!' after 2 seconds
Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.
function throttle(func, limit) {
let inThrottle;
return function (...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
const handleResize = throttle(() => {
// Update element positions
console.log("Window resized at", new Date().toLocaleTimeString());
}, 2000);
// Simulate rapid calls to handleResize every 100ms
let intervalId = setInterval(() => {
handleResize();
}, 100);
// 'Window resized' is outputted only every 2 seconds due to throttling