[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: (fn: (...args: Params) => void, debounceTimeInMs: number, input?: DebounceOptions) => DebouncedFunction ``` ## Parameters

Parameter	Type	Description
fn	(...args: Params) => void	Function to be debounced.
debounceTimeInMs	number
{ leading, trailing }	(not declared)	_(Optional)_
input	[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
leading \\ \| \*\*`false`\*\* \| \*\*`true`\*\* \| \|:\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\--\|\-\-\-\-\-\-\-\-\-\-\-\--\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\| \| \*\*`false`\*\* \| \| c, e, f \| \| \*\*`true`\*\* \| a, d, f \| a, c, d, e, f \|