raf-funcs

    0.5.1 • Public • Published

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

    Performance tips from

    License

    MIT

    Install

    npm i raf-funcs

    DownloadsWeekly Downloads

    4

    Version

    0.5.1

    License

    MIT

    Last publish

    Collaborators

    • jeromedecoster