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.

npm install raf-throttle --save

yarn add raf-throttle

Download the file from https://unpkg.com/raf-throttle/umd/rafThrottle.min.js,

and consume it from global as rafThrottle.

Since most of browsers support requestAnimationFrame by default, you can use raf-throttle directly. However, if you want to support old browsers, you will need to polyfill requestAnimationFrame by youself. One option is using raf.

Avoid excessively updating the position while scrolling.

import throttle from 'raf-throttle'

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

import throttle from 'raf-throttle'

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

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.

Cancel the trailing throttled invocation.

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

import throttle from 'raf-throttle'

callback is the function to be throttled by requestAnimationFrame.

Cancel the trailing throttled invocation.

• ⇄ 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).