Debounce on the leading edge

Arguments

fnFunction

The function to invoke on the leading edge.

waitnumber

Length of the cooldown, in milliseconds. The cooldown restarts on every call.

Returns

Function — A wrapper that fires on the first call of a burst, then swallows everything until things go quiet.

Examples

const submit = leadingDebounce(() => console.log("submit"), 500);

submit(); // logs "submit" immediately
submit(); // ignored — cooldown active
submit(); // ignored — cooldown restarted

// 500ms of silence later:
submit(); // logs "submit" again

const double = leadingDebounce((n) => n * 2, 50);

double(5); // 10 — leading call returns fn's value
double(6); // undefined — suppressed

What it has to do

• Invoke fn synchronously on the first call and return its result.
• Suppress the rest of a burst and return undefined for suppressed calls.
• Never make a trailing call once the burst ends.
• Restart the cooldown on every call, so a steady stream of calls closer together than wait only ever fires once.
• Invoke fn again on the first call after a full wait of silence.

Notes

• Let the timer handle double duty: null means "next call fires"; a non-null handle means "cooling down". Every call clears the old timer and sets a new one.
• Opposite of trailing debounce: leading fires early then goes quiet; trailing waits for quiet then fires. Pick leading for buttons, trailing for search boxes.