Framework
Version
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference

Debouncer

Class: Debouncer<TFn>

Defined in: debouncer.ts:118

A class that creates a debounced function.

Debouncing ensures that a function is only executed after a certain amount of time has passed since its last invocation. This is useful for handling frequent events like window resizing, scroll events, or input changes where you want to limit the rate of execution.

The debounced function can be configured to execute either at the start of the delay period (leading edge) or at the end (trailing edge, default). Each new call during the wait period will reset the timer.

State Management:

  • Uses TanStack Store for reactive state management
  • Use initialState to provide initial state values when creating the debouncer
  • Use onExecute callback to react to function execution and implement custom logic
  • The state includes canLeadingExecute, execution count, and isPending status
  • State can be accessed via debouncer.store.state when using the class directly
  • When using framework adapters (React/Solid), state is accessed from debouncer.state

Example

ts
const debouncer = new Debouncer((value: string) => {
  saveToDatabase(value);
}, { wait: 500 });

// Will only save after 500ms of no new input
inputElement.addEventListener('input', () => {
  debouncer.maybeExecute(inputElement.value);
});
const debouncer = new Debouncer((value: string) => {
  saveToDatabase(value);
}, { wait: 500 });

// Will only save after 500ms of no new input
inputElement.addEventListener('input', () => {
  debouncer.maybeExecute(inputElement.value);
});

Type Parameters

TFn extends AnyFunction

Constructors

new Debouncer()

ts
new Debouncer<TFn>(fn, initialOptions): Debouncer<TFn>
new Debouncer<TFn>(fn, initialOptions): Debouncer<TFn>

Defined in: debouncer.ts:125

Parameters

fn

TFn

initialOptions

DebouncerOptions<TFn>

Returns

Debouncer<TFn>

Properties

options

ts
options: DebouncerOptions<TFn>;
options: DebouncerOptions<TFn>;

Defined in: debouncer.ts:122


store

ts
readonly store: Store<Readonly<DebouncerState<TFn>>>;
readonly store: Store<Readonly<DebouncerState<TFn>>>;

Defined in: debouncer.ts:119

Methods

cancel()

ts
cancel(): void
cancel(): void

Defined in: debouncer.ts:242

Cancels any pending execution

Returns

void


flush()

ts
flush(): void
flush(): void

Defined in: debouncer.ts:225

Processes the current pending execution immediately

Returns

void


maybeExecute()

ts
maybeExecute(...args): void
maybeExecute(...args): void

Defined in: debouncer.ts:184

Attempts to execute the debounced function If a call is already in progress, it will be queued

Parameters

args

...Parameters<TFn>

Returns

void


reset()

ts
reset(): void
reset(): void

Defined in: debouncer.ts:253

Resets the debouncer state to its default values

Returns

void


setOptions()

ts
setOptions(newOptions): void
setOptions(newOptions): void

Defined in: debouncer.ts:139

Updates the debouncer options

Parameters

newOptions

Partial<DebouncerOptions<TFn>>

Returns

void

Our Partners
Unkey
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.