raf-throttle

raf-throttle

Throttle a function by requestAnimationFrame

raf-throttle let you create a throttled function, which only invokes the passed function at most once per animation frame on a browser or per 1000/60 ms on Node.

Installation

npm install raf-throttle --save

Usage

Example

Avoid excessively updating the position while scrolling.

JS

import throttle from 'raf-throttle'

const throttled = throttle(updatePosition)
window.addEventListener('scroll', throttled)

jQuery

import throttle from 'raf-throttle'

$(window).on('scroll', throttle(updatePosition))

React

import React from 'react'
import throttle from 'raf-throttle'

class extends React.Component {
  onScroll = throttle(updatePosition)

  componentDidMount = () =>
    window.addEventListener('scroll', this.onScroll)

  componentWillUnmount = () =>
    window.removeEventListener('scroll', this.onScroll)

  render = () =>
    /* Your code */
}

If you think the React code is verbose and you want to move them into a higher-order component, you shoul take a look at react-dom-utils, which has done this for you.

Canceling

Cancel the trailing throttled invocation.

const throttled = throttle(foo) 
throttled()
throttled.cancel() // foo would never be invoked

API

import throttle from 'raf-throttle'

const throttled = throttle(callback)

callback is the function to be throttled by requestAnimationFrame.

throttled.cancel()

Cancel the trailing throttled invocation.

Contributing

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests ($ npm test).

CHANGELOG

LICENSE