Simple debouncer with identifiers
- Install
yarn add @grd/debouncer - Import the helper:
import {debounce} from '@grd/debouncer'; - Import the instance:
import {debouncer} from '@grd/debouncer';
- debounce(fn:
function[, delay:number= 250][, identifier:string= 'DEFAULT']):Debouncer - clearAll():
Debouncer:: Clear all pending timeouts. - clear(identifier:
string):Debouncer:: Clear a specific timeout. - getAll():
Object:: Get the timout id's and associated identifiers. - setDefaultDelay(delay:
number):Debouncer:: Sets the default delay.
Note: delay = 0 will invoke the function immediately.
import {debounce} from '@grd/debouncer';
<button onClick={() => {
debounce(() => console.log('Some debounced handler'), 800)
}}>
Example 1
</button>import {debounce} from '@grd/debouncer';
<button onClick={() => {
debounce(() => console.log('Debounced handler A'), 800, 'A')
debounce(() => console.log('Debounced handler B'), 800, 'B')
}}>
Simple use case with identifiers
</button>import {debouncer} from '@grd/debouncer';
<button onClick={() => {
debouncer.debounce(() => console.log('Some debounced handler'), 8000)
}}>
Example 1
</button>
<button onClick={() => debouncer.clearAll()}>
Clear all pending timouts
</button>import {debouncer} from '@grd/debouncer';
<button onClick={() => {
debouncer.debounce(() => console.log('Debounced handler A'), 1000, 'A')
debouncer.debounce(() => console.log('Debounced handler B'), 2000, 'B')
debouncer.debounce(() => console.log('Debounced handler C'), 3000, 'C')
}}>
Example 2
</button>
<button onClick={() => debouncer.clear('C')}>
Clear a specific timeout
</button>import {debouncer} from '@grd/debouncer';
<button onClick={() => {
debouncer.debounce(() => console.log('Debounced handler A'), 1000, 'A')
debouncer.debounce(() => console.log('Debounced handler B'), 2000, 'B')
debouncer.debounce(() => console.log('Debounced handler C'), 3000, 'C')
}}>
Example 3
</button>
<button onClick={() => console.log(debouncer.getAll())}>
Get the timout id's and associated identifiers
</button>
//{DEFAULT: 0, A: 1, B: 2, C: 3}import {Debouncer} from '@grd/debouncer';
const debouncerA = new Debouncer();
const debouncerB = new Debouncer(600); //You can pass a default delay.
<button onClick={() => {
debouncerA.debounce(() => console.log('Some debounced handler'), 8000)
debouncerB.debounce(() => console.log('Some debounced handler'), 8000)
}}>
Example 1
</button>