📄 tanstack/pacer/latest/docs/reference/classes/Debouncer

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. This synchronous version is lighter weight and often all you need - upgrade to AsyncDebouncer when you need promises, retry support, abort/cancel capabilities, or advanced error handling.

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
-------

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

TFn extends AnyFunction

Constructors
------------ ### Constructor

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


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

Defined in: debouncer.ts:150

#### Parameters ##### fn

TFn

##### initialOptions

DebouncerOptions <TFn>

#### Returns

Debouncer<TFn>

Properties
---------- ### fn

fn: TFn;


fn: TFn;

Defined in: debouncer.ts:151

### key

key: string | undefined;


key: string | undefined;

Defined in: debouncer.ts:146

### options

options: DebouncerOptions<TFn>;


options: DebouncerOptions<TFn>;

Defined in: debouncer.ts:147

### store

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


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

Defined in: debouncer.ts:143

Methods
------- ### cancel()

cancel(): void;


cancel(): void;

Defined in: debouncer.ts:281

Cancels any pending execution

#### Returns

void

### flush()

flush(): void;


flush(): void;

Defined in: debouncer.ts:264

Processes the current pending execution immediately

#### Returns

void

### maybeExecute()

maybeExecute(...args): void;


maybeExecute(...args): void;

Defined in: debouncer.ts:217

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

#### Parameters ##### args

...Parameters<TFn>

#### Returns

void

### reset()

reset(): void;


reset(): void;

Defined in: debouncer.ts:292

Resets the debouncer state to its default values

#### Returns

void

### setOptions()

setOptions(newOptions): void;


setOptions(newOptions): void;

Defined in: debouncer.ts:171

Updates the debouncer options

#### Parameters ##### newOptions

Partial<DebouncerOptions <TFn>>

void

Partners Become a Partner

scarf analytics