raf-funcs
v0.5.1
Published
A very limited subset of requestAnimationFrame functions I use every day
Downloads
11
Maintainers
Readme
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 = require('raf-funcs/debounce')
var debounced = debounce(function() {
console.log('250 ms after the last keyup')
}, 250)
input.addEventListener('keyup', debounced)
// 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 = require('raf-funcs/interval')
var ref = interval(function() {
console.log('every second')
}, 1000)
// true
ref.started
// 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 = require('raf-funcs/interval')
// elapsed: 1010 step: 1
// elapsed: 2011 step: 2
// elapsed: 3014 step: 3
interval(function(elapsed, step) {
console.log('elapsed:', elapsed, 'step:', step)
}, 1000, null, 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 = require('raf-funcs/throttle')
var throttled = throttle(function() {
console.log('after the first resize, then after each 250 ms elapsed')
}, 250)
window.addEventListener('resize', throttled)
// 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 = require('raf-funcs/timeout')
var ref = timeout(function() {
console.log('1 second later')
}, 1000)
// true
ref.started
// 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 = require('raf-funcs/timeout')
// elapsed: 1006
timeout(function(elapsed) {
console.log('elapsed:', elapsed)
}, 1000)
Thanks
Mainly forked / inspired on
Performance tips from
License
MIT