@empathyco/x-components
Version:
Empathy X Components
50 lines (33 loc) • 2.19 kB
Markdown
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [debounceFunction](./x-components.debouncefunction.md)
## debounceFunction() function
Util function that returns a debounced version of the function passed as parameter. It can use the leading strategy, trailing strategy or both. Using both would result in one leading execution guaranteed and trailing executions only if there are further calls during the length of the debounce time.
**Signature:**
```typescript
debounce: <Params extends any[]>(fn: (...args: Params) => void, debounceTimeInMs: number, { leading, trailing }?: DebounceOptions) => DebouncedFunction<Params>
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| fn | (...args: Params) => void | Function to be debounced. |
| debounceTimeInMs | number | |
| { leading, trailing } | [DebounceOptions](./x-components.debounceoptions.md) | _(Optional)_ |
**Returns:**
[DebouncedFunction](./x-components.debouncedfunction.md)<!-- --><Params>
A new function with the debounce.
## Example
Debounce options:
Given this code, where you configure the `trailing` and `leading` options:
```js
const log = debounce(name => console.log(name), 1000, {
leading
trailing
});
log('a'); // +0ms
log('b'); // +0ms
log('c'); // +0ms
setTimeout(() => log('d'), 1000); // +1000ms
setTimeout(() => log('e'), 1500); // +500ms
setTimeout(() => log('f'), 2600); // +1100ms
```
\| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- -->\\ trailing<br/> leading \\ \| \*\*`false`<!-- -->\*\* \| \*\*`true`<!-- -->\*\* \| \|:\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\--\|\-\-\-\-\-\-\-\-\-\-\-\--\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\| \| \*\*`false`<!-- -->\*\* \| \| c, e, f \| \| \*\*`true`<!-- -->\*\* \| a, d, f \| a, c, d, e, f \|