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.

Demo

Installation

npm

npm install raf-throttle --save

yarn

yarn add raf-throttle

CDN

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

and consume it from global as rafThrottle.

Usage

Polyfill

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.

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