# raf-throttle

> Throttle a function by requestAnimationFrame

Latest version **2.0.6** (published 2022-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install raf-throttle
pnpm add raf-throttle
yarn add raf-throttle
bun add raf-throttle
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2022-12-10 |
| First published | 2016-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 100 |
| Author | wuct |
| Maintainers | wuct |
| Keywords | raf, throttle, requestAnimationFrame |

## Links

- npm: https://www.npmjs.com/package/raf-throttle
- Repository: https://github.com/wuct/raf-throttle
- Homepage: https://github.com/wuct/raf-throttle#readme
- Issues: https://github.com/wuct/raf-throttle/issues
- npm.io page: https://npm.io/package/raf-throttle

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 2.0.6 (latest) — 2022-12-10
- 2.0.5 — 2020-09-13
- 2.0.4 — 2020-09-13
- 2.0.3 — 2017-07-14
- 2.0.2 — 2017-03-15
- 2.0.1 — 2017-03-15
- 2.0.0 — 2017-03-15
- 1.1.1 — 2016-04-16
- 1.1.0 — 2016-04-16
- 1.0.3 — 2016-04-07
- 1.0.2 — 2016-03-27
- 1.0.1 — 2016-03-24
- 1.0.0 — 2016-03-23

## README

# raf-throttle

> Throttle a function by requestAnimationFrame

[![npm](https://img.shields.io/npm/v/raf-throttle.svg)](https://www.npmjs.com/package/raf-throttle)
[![Build Status](https://travis-ci.org/wuct/raf-throttle.svg?branch=master)](https://travis-ci.org/wuct/raf-throttle)
[![codecov](https://codecov.io/gh/wuct/raf-throttle/branch/master/graph/badge.svg)](https://codecov.io/gh/wuct/raf-throttle) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

[raf-throttle](https://www.npmjs.com/package/raf-throttle) let you create a throttled function, which only invokes the passed function at most once per [animation frame](https://developer.mozilla.org/en/docs/Web/API/window/requestAnimationFrame) on a browser or per 1000/60 ms on Node.

## [Demo](https://jsfiddle.net/mxbnpwp0/)

## 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](https://unpkg.com/raf-throttle/umd/rafThrottle.min.js),

and consume it from global as `rafThrottle`.

## Usage

### Polyfill

Since [most of browsers](http://caniuse.com/#feat=requestanimationframe) 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`](https://www.npmjs.com/package/raf).

### Example

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`](https://github.com/wuct/react-dom-utils), which has done this for you.

### Canceling

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`](https://developer.mozilla.org/en/docs/Web/API/window/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](CHANGELOG.md)

## [LICENSE](LICENSE)

---
_Source: https://npm.io/package/raf-throttle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._