Understanding Debounce and Throttle in JavaScript

Custom Implementations of Debounce and Throttle in JavaScript

Debounce Function

function debounce(func, wait = 300) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}

Explanation:

1. We store a timeoutId in closure.
2. Each call clears the previous timer (if any).
3. We set a new timer to invoke func after wait

Throttle Function

function throttle(func, interval = 300) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= interval) {
lastTime = now;
func.apply(this, args);
}
};
}

Explanation:

1. We track the timestamp of the last invocation.
2. On each call, we check if enough time (interval) has passed.
3. If yes, we update lastTime and invoke func.

Using Lodash Utilities

Lodash provides battle-tested implementations with additional features:

• debounce(func, wait, [options]): built-in cancel and flush methods; choose leading/trailing behavior ([lodash.info][3]).
• throttle(func, wait, [options]): built‑in cancel and flush; configure leading/trailing edges ([lodash.info][5]).

import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

const optimizedDebounce = debounce(apiCall, 500, { leading: false, trailing: true });
const optimizedThrottle = throttle(onScroll, 200, { leading: true, trailing: false });

Key Takeaways: Both _.debounce and _.throttle return enhanced functions that include built‑in methods—namely .cancel() to abort pending calls and .flush() to immediately invoke them—and accept an options object to control leading (invoke at start) and trailing (invoke at end) behavior. Understanding these options lets you fine‑tune exactly when your handler fires during bursts of events, preventing both premature and redundant calls.

Lodash’s Built‑In Methods

.cancel()

Both debounced and throttled functions expose a .cancel() method. Calling it discards any pending invocation that was scheduled but not yet fired.

• Use case (debounce): Aborting a delayed save operation when a form is reset.
• Use case (throttle): Stopping a periodic analytics ping when the user navigates away.

.flush()

Likewise, both come with .flush(), which immediately invokes the original function if a call is pending, then clears the timer.

• Use case (debounce): Forcing an immediate search request when the user submits a form.
• Use case (throttle): Ensuring the final scroll position update happens before teardown.

Leading vs. Trailing Options

Both utilities accept an options object:

_.debounce(func, wait, { leading, trailing, maxWait })
_.throttle(func, wait, { leading, trailing })

• leading: true – Invoke func immediately on the first call within the window.
• trailing: true – Invoke func after the window finishes, using the last arguments seen.
• maxWait (debounce only) – Ensures that, even during constant calls, func is invoked at least every maxWait

By default:

• Debounce: { leading: false, trailing: true }
• Throttle: { leading: true, trailing: true }

Debounce Behaviors

• Default ({leading:false, trailing:true}): Fires only once, after calls have stopped for wait
• Leading only ({leading:true, trailing:false}): Fires immediately on first call, then ignores subsequent calls until wait
• Both edges ({leading:true, trailing:true}): Fires once on first call, then again after calls stop for wait ms—unless only a single call occurred, in which case it fires only on the leading edge.

const search = _.debounce(doSearch, 500, {
leading: true,
trailing: true,
maxWait: 2000
});

Throttle Behaviors

• Default ({leading:true, trailing:true}): Fires immediately, then ensures at most one call per wait ms, firing again after the window if calls occurred during it.
• Leading only ({leading:true, trailing:false}): Fires immediately, then suppresses any trailing invocation.
• Trailing only ({leading:false, trailing:true}): Suppresses the initial call, then fires once at the end of each window if calls occurred.

const onScroll = _.throttle(updateScroll, 100, {
leading: false,
trailing: true
});