Skip to content

debounce

Limit the frequency of a function call by delaying its execution until a certain amount of time has passed since the last invocation. It is commonly used in scenarios where you want to prevent a function from being called too frequently, such as handling user input or event listeners.

The debounced function comes with a cancel method to cancel delayed invocations and a flush method to immediately invoke them.

Provide an options object to indicate that func should be invoked on the leading and/or trailing edge of the wait timeout.

Subsequent calls to the debounced function return the result of the last func invocation.

Note

If leading and trailing options are true, func is invoked on the trailing edge of the timeout only if the the debounced function is invoked more than once during the wait timeout.

Demo

Trigger areaMove the mouse to start
Raw events over time
Debounced events

debounce function

ts
function debounce<T extends AnyFunc>(func: T, timeout?: number): DebouncedFunc<T>

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.

Type Parameters

  • T extends AnyFunc

Parameters

  • func: T The function to debounce.
  • timeout?: number The number of milliseconds to delay.

Return DebouncedFunc<T>


ts
function debounce<T extends AnyFunc>(func: T, options: DebounceOptions): DebouncedFunc<T>

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.

Type Parameters

  • T extends AnyFunc

Parameters

  • func: T The function to debounce.
  • options: DebounceOptions The options object.

Return DebouncedFunc<T>


ts
function debounce<T extends AnyFunc>(func: T, options: DebounceOptions & { leading: true; }): DebouncedFuncLeading<T>

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.

Type Parameters

  • T extends AnyFunc

Parameters

  • func: T The function to debounce.
  • options: DebounceOptions & { leading: true; } The options object.

Return DebouncedFuncLeading<T>

DebounceOptions interface

ts
interface DebounceOptions

Properties

NameTypeDescription
timeoutnumberoptional The number of milliseconds to delay.
maxWaitnumberoptional The maximum time func is allowed to be delayed before it’s invoked.
leadingbooleanoptional Specify invoking on the leading edge of the timeout.
trailingbooleanoptional Specify invoking on the trailing edge of the timeout.

DebouncedFunc interface

ts
interface DebouncedFunc<T extends AnyFunc>

Type Parameters

  • T extends AnyFunc

Properties

NameTypeDescription
isPendingbooleanreadonly Returns true if the debounced function is waiting to be invoked.

cancel method

ts
cancel(): void

Throw away any pending invocation of the debounced function.

flush method

ts
flush(): ReturnType<T> | undefined

If there is a pending invocation of the debounced function, invoke it immediately and return its return value.

Otherwise, return the value from the last invocation, or undefined if the debounced function was never invoked.

Return ReturnType<T> | undefined

DebouncedFuncLeading interface

ts
interface DebouncedFuncLeading<T extends AnyFunc> extends DebouncedFunc<T>

Type Parameters

  • T extends AnyFunc

Properties

NameTypeDescription
isPendingbooleanreadonly Returns true if the debounced function is waiting to be invoked.

flush method

ts
flush(): ReturnType<T>

If there is a pending invocation of the debounced function, invoke it immediately and return its return value.

Otherwise, return the value from the last invocation, or undefined if the debounced function was never invoked.

Return ReturnType<T>

cancel method

ts
cancel(): void

Throw away any pending invocation of the debounced function.

MIT License, Made with ❤️