raf-funcs
A very limited subset of requestAnimationFrame functions I use every day
Install
npm i raf-funcs
Package on npm
API
debounce(cb, [delay], [ctx])
Debounce a function, based on requestAnimationFrame
Argument | Action |
---|---|
cb | the callback |
delay | optional delay, default to 300 ms, min to 25 ms |
ctx | optional context of this , default to global |
Return a reference with
- Two methods
immediate
andcancel
const debounce = var debounced = input // uncomment to cancel the debounce// debounced.cancel() // uncomment to call it immediately// debounced.immediate()
interval(cb, [delay], [ctx], [count])
Like setInterval
but based on requestAnimationFrame
Argument | Action |
---|---|
cb | the callback |
delay | optional delay, default to 0 ms |
ctx | optional context of this , default to global |
count | optional maximum call, default to Infinity |
Return a reference with
- A property
started
- Two methods
start
andcancel
const interval = var ref = // truerefstarted // uncomment to cancel the interval// ref.cancel() // uncomment to restart the interval (if finished or canceled)// ref.start()
The callback cb
receive two arguments
Argument | Action |
---|---|
elapsed | the elapsed time since the start |
step | the step count |
const interval = // elapsed: 1010 step: 1// elapsed: 2011 step: 2// elapsed: 3014 step: 3
throttle(cb, [delay], [ctx])
Throttle a function, based on requestAnimationFrame
Argument | Action |
---|---|
cb | the callback |
delay | optional delay, default to 50 ms, min to 25 ms |
ctx | optional context of this , default to global |
Return a reference with
- Two methods
immediate
andcancel
const throttle = var throttled = window // uncomment to cancel the throttle// throttled.cancel() // uncomment to call it immediately// throttled.immediate()
timeout(cb, [delay], [ctx])
Like setTimeout
but based on requestAnimationFrame
Argument | Action |
---|---|
cb | the callback |
delay | optional delay, default to 0 ms |
ctx | optional context of this , default to global |
Return a reference with
- A property
started
- Two methods
start
andcancel
const timeout = var ref = // truerefstarted // uncomment to cancel the timeout// ref.cancel() // uncomment to restart the timeout (if finished or canceled)// ref.start()
The callback cb
receive one argument
Argument | Action |
---|---|
elapsed | the elapsed time since the start |
const timeout = // elapsed: 1006
Thanks
Mainly forked / inspired on
Performance tips from
License
MIT