Defined in: async-debouncer.ts:218
A class that creates an async debounced function.
Async vs Sync Versions: The async version provides advanced features over the sync Debouncer:
The sync Debouncer is lighter weight and simpler when you don't need async features, return values, or execution control.
What is Debouncing? Debouncing ensures that a function is only executed after a specified delay has passed since its last invocation. Each new invocation resets the delay timer. This is useful for handling frequent events like window resizing or input changes where you only want to execute the handler after the events have stopped occurring.
Unlike throttling which allows execution at regular intervals, debouncing prevents any execution until the function stops being called for the specified delay period.
Error Handling:
State Management:
const asyncDebouncer = new AsyncDebouncer(async (value: string) => {
const results = await searchAPI(value);
return results; // Return value is preserved
}, {
wait: 500,
onError: (error) => {
console.error('Search failed:', error);
}
});
// Called on each keystroke but only executes after 500ms of no typing
// Returns the API response directly
const results = await asyncDebouncer.maybeExecute(inputElement.value);
const asyncDebouncer = new AsyncDebouncer(async (value: string) => {
const results = await searchAPI(value);
return results; // Return value is preserved
}, {
wait: 500,
onError: (error) => {
console.error('Search failed:', error);
}
});
// Called on each keystroke but only executes after 500ms of no typing
// Returns the API response directly
const results = await asyncDebouncer.maybeExecute(inputElement.value);
• TFn extends AnyAsyncFunction
new AsyncDebouncer<TFn>(fn, initialOptions): AsyncDebouncer<TFn>
new AsyncDebouncer<TFn>(fn, initialOptions): AsyncDebouncer<TFn>
Defined in: async-debouncer.ts:230
TFn
AsyncDebouncer<TFn>
asyncRetryers: Map<number, AsyncRetryer<TFn>>;
asyncRetryers: Map<number, AsyncRetryer<TFn>>;
Defined in: async-debouncer.ts:224
fn: TFn;
fn: TFn;
Defined in: async-debouncer.ts:231
key: string;
key: string;
Defined in: async-debouncer.ts:222
options: AsyncDebouncerOptions<TFn>;
options: AsyncDebouncerOptions<TFn>;
Defined in: async-debouncer.ts:223
readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
Defined in: async-debouncer.ts:219
_emit(): void
_emit(): void
Defined in: async-debouncer.ts:252
Emits a change event for the async debouncer instance. Mostly useful for devtools.
void
abort(): void
abort(): void
Defined in: async-debouncer.ts:468
Aborts all ongoing executions with the internal abort controllers. Does NOT cancel any pending execution that have not started yet.
void
cancel(): void
cancel(): void
Defined in: async-debouncer.ts:480
Cancels any pending execution that have not started yet. Does NOT abort any execution already in progress.
void
flush(): Promise<undefined | ReturnType<TFn>>
flush(): Promise<undefined | ReturnType<TFn>>
Defined in: async-debouncer.ts:403
Processes the current pending execution immediately
Promise<undefined | ReturnType<TFn>>
getAbortSignal(maybeExecuteCount?): null | AbortSignal
getAbortSignal(maybeExecuteCount?): null | AbortSignal
Defined in: async-debouncer.ts:458
Returns the AbortSignal for a specific execution. If no maybeExecuteCount is provided, returns the signal for the most recent execution. Returns null if no execution is found or not currently executing.
number
Optional specific execution to get signal for
null | AbortSignal
const debouncer = new AsyncDebouncer(
async (searchTerm: string) => {
const signal = debouncer.getAbortSignal()
if (signal) {
const response = await fetch(`/api/search?q=${searchTerm}`, { signal })
return response.json()
}
},
{ wait: 300 }
)
const debouncer = new AsyncDebouncer(
async (searchTerm: string) => {
const signal = debouncer.getAbortSignal()
if (signal) {
const response = await fetch(`/api/search?q=${searchTerm}`, { signal })
return response.json()
}
},
{ wait: 300 }
)
maybeExecute(...args): Promise<undefined | ReturnType<TFn>>
maybeExecute(...args): Promise<undefined | ReturnType<TFn>>
Defined in: async-debouncer.ts:317
Attempts to execute the debounced function. If a call is already in progress, it will be queued.
Error Handling:
...Parameters<TFn>
Promise<undefined | ReturnType<TFn>>
A promise that resolves with the function's return value, or undefined if an error occurred and was handled by onError
The error from the debounced function if no onError handler is configured
reset(): void
reset(): void
Defined in: async-debouncer.ts:488
Resets the debouncer state to its default values
void
setOptions(newOptions): void
setOptions(newOptions): void
Defined in: async-debouncer.ts:257
Updates the async debouncer options
Partial<AsyncDebouncerOptions<TFn>>
void
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
