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.

Demo

Installation

$3

npm install raf-throttle --save

$3

yarn add raf-throttle

$3

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

and consume it from global as rafThrottle.

Usage

$3

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.

$3

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.

$3

Cancel the trailing throttled invocation.

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

API

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

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