TypeScript implementation of debounce
npm install ts-debounce!Build Status




_Debounce_ creates a new function g, which when called will delay the invocation of the original function f until n milliseconds, BUT drop previous pending delayed emissions if a new invocation is made before n milliseconds.
It's very useful for scenarios when it's better to limit the number of times the function is called. E.g. think of search input which fetches data from API. It's enough display search results after user has stopped entering characters for some time.
You can install this package using npm using the command below
``bash`
npm install ts-debounce
If you prefer yarn, install using the command below
`bash`
yarn add ts-debounce
`ts
import { debounce } from "ts-debounce";
const debouncedFunction = debounce(originalFunction, waitMilliseconds, options);
`
- originalFunctionwaitMilliseconds
- the function which we want to debounce
- options
- how many seconds must pass after most recent function call, for the original function to be called
- isImmediate
- (boolean)true
- if set to then originalFunction will be called immediately, but on subsequent calls of the debounced function original function won't be called, unless waitMilliseconds passed after last callmaxWait
- (number)originalFunction
- if defined it will call the after maxWait time has passed, even if the debounced function is called in the meantimewait
- e.g. if is set to 100 and maxWait to 200, then if the debounced function is called every 50ms, then the original function will be called after 200ms anywaycallback
- (function)originalFunction
- it is called when is debounced and receives as first parameter returned data from originalFunction
The returned debounced function can be cancelled by calling cancel() on it.
`ts
const debouncedFunction = debounce(originalFunction, waitMilliseconds, options);
debouncedFunction.cancel();
`
Since v3 ts-debounce has Promise support. Everytime you call debounced function a promise is returned which will be resolved when the original function will be finally called. This promise will be rejected, if the debounced function will be cancelled.
You can also debounce a function f which returns a promise. The returned promise(s) will resolve (unless cancelled) with the return value of the original function.
`ts``
const asyncFunction = async () => "value";
const g = debounce(asyncFunction);
const returnValue = await g();
returnValue === "value"; // true
This implementation is based upon following sources:
- JavaScript Debounce Function by David Walsh
- Lodash implementation
- p-debounce
- version 3 - Promise must be available in the global namespace
- version 2 - TypeScript 3.3
- version 1 - TypeScript 2.0
Thanks goes to these wonderful people (emoji key):
Zac 💻 | Karol Majewski 💻 | Fabien Rogeret 💻 | Iman 💻 | juanmendes 🤔 | sanduluca 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!