raf-funcs v0.5.1

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

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

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

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

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

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

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