mini-debounce
An extremely small and modern debounce library that is supported by all major browsers.
mini-debounce
is only 94 bytes, that's smaller than tiny-debounce
by 161 bytes!!!
Installation:
yarn add mini-debounce# or npm install mini-debounce
Usage:
Arguments
Name | Type | Description |
---|---|---|
callback | Function | The function to be debounced |
timeout | number | The number of milliseconds to wait after called |
Returns
Type | Description |
---|---|
Function | Returns the new debounced function, once called the previous timeout is cancelled and a new timeout is initiated |
"Okay but what does that function return?"
It returns the id from setTimeout
which allows you to run clearTimeout
in order to cancel the debounced call.
First let's import it
The function is not exported as default
as to provide better intellisense.
// orconst debounce =
Now let's use it:
// Create the debounced functionconst debouncedLog = // Use it // 1000 milliseconds later// => "[LOG] if after all" // You can cancel them as wellconst id =
How about in a React component
Here we'll demonstrate an implementation of a debounced search input.
state = query: '' search = { const query = eventtargetvalue this this } { return <input = = /> }
// Now as a function { const query setQuery = const search = { const query = eventtargetvalue } return <input = = />}
License
MIT License Copyright © 2019 Christopher Holden Brown