Throttle a function by requestAnimationFrame
npm install 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.
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.
#### JS
``js
import throttle from 'raf-throttle';
const throttled = throttle(updatePosition);
window.addEventListener('scroll', throttled);
`
#### jQuery
`js
import throttle from 'raf-throttle';
$(window).on('scroll', throttle(updatePosition));
`
#### React
`js
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.
`js`
const throttled = throttle(foo);
throttled();
throttled.cancel(); // foo would never be invoked
`js`
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.
- ⇄ 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`).