raf-funcs

A very limited subset of requestAnimationFrame functions I use every day

Install

npm i raf-funcs

Package on npm

API

• debounce
• interval
• throttle
• timeout

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 and cancel

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 and cancel

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 and cancel

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 and cancel

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

• request-timeout
• request-interval
• mout/throttle
• mout/debounce

Performance tips from

• Date.now() vs performance.now()
• {} vs Object.create(null)
• faster isNaN

License

MIT