Skip to content

Commit

Permalink
docs: improve debounce docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Waleed-KH committed Aug 27, 2024
1 parent 4e8b2fc commit f3ccaad
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 8 deletions.
10 changes: 10 additions & 0 deletions packages/utilix/src/function/debounce/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@ import Demo from './demo.vue';

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](#cancel-method) to cancel delayed invocations and a [`flush` method](#flush-method) to immediately invoke them.

Provide an [`options` object](#debounceoptions-interface) 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.

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

<Demo />
27 changes: 19 additions & 8 deletions packages/utilix/src/function/debounce/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,32 @@ export interface DebouncedFuncLeading<T extends AnyFunc> extends 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. 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.
* the last time the debounced function was invoked.
*
* @param func The function to debounce.
* @param timeout The number of milliseconds to delay.
* @param options The options object.
* @return Returns the new debounced function.
*/
export 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.
*
* @param func The function to debounce.
* @param options The options object.
* @return Returns the new debounced function.
*/
export 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.
*
* @param func The function to debounce.
* @param options The options object.
* @return Returns the new debounced function.
*/
export function debounce<T extends AnyFunc>(func: T, options: DebounceOptions & { leading: true; }): DebouncedFuncLeading<T>;
export function debounce<T extends AnyFunc>(func: T, options: number | DebounceOptions = {}) {
if (isNumber(options))
Expand Down

0 comments on commit f3ccaad

Please sign in to comment.