Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

raf-schd

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

raf-schd - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

4

dist/raf-schd.cjs.js

@@ -15,3 +15,3 @@ 'use strict';

if (frameId) {
return frameId;
return;
}

@@ -23,4 +23,2 @@

});
return frameId;
};

@@ -27,0 +25,0 @@

4

dist/raf-schd.esm.js

@@ -13,3 +13,3 @@ var index = (function (fn) {

if (frameId) {
return frameId;
return;
}

@@ -21,4 +21,2 @@

});
return frameId;
};

@@ -25,0 +23,0 @@

4

dist/raf-schd.js

@@ -19,3 +19,3 @@ (function (global, factory) {

if (frameId) {
return frameId;
return;
}

@@ -27,4 +27,2 @@

});
return frameId;
};

@@ -31,0 +29,0 @@

2

dist/raf-schd.min.js

@@ -1,1 +0,1 @@

!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.rafSchd=e()}(this,function(){"use strict";return function(o){var i=[],r=null,n=function(){for(var n=arguments.length,e=Array(n),t=0;t<n;t++)e[t]=arguments[t];return i=e,r||(r=requestAnimationFrame(function(){r=null,o.apply(void 0,i)}))};return n.cancel=function(){r&&(cancelAnimationFrame(r),r=null)},n}});
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.rafSchd=e()}(this,function(){"use strict";return function(o){var i=[],u=null,n=function(){for(var n=arguments.length,e=Array(n),t=0;t<n;t++)e[t]=arguments[t];i=e,u||(u=requestAnimationFrame(function(){u=null,o.apply(void 0,i)}))};return n.cancel=function(){u&&(cancelAnimationFrame(u),u=null)},n}});

14

package.json
{
"name": "raf-schd",
"version": "3.0.1",
"version": "4.0.0",
"description": "A scheduler based on requestAnimationFrame",

@@ -24,7 +24,11 @@ "main": "dist/raf-schd.cjs.js",

],
"config": {
"prettier_target": "*.{js,md,json} src/**/*.{js,md,json} test/**/*.{js,md,json}"
},
"scripts": {
"build": "yarn run build:clean && yarn run build:dist && yarn run build:flow",
"test": "jest",
"validate": "yarn run lint && yarn run typecheck",
"lint": "eslint src test",
"validate": "yarn run prettier:check && yarn run typecheck",
"prettier:check": "prettier --debug-check $npm_package_config_prettier_target",
"prettier:write": "prettier --write $npm_package_config_prettier_target",
"typecheck": "flow check",

@@ -43,7 +47,5 @@ "build:clean": "rimraf dist",

"cross-env": "^5.2.0",
"eslint": "5.0.1",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-jest": "21.17.0",
"flow-bin": "0.75.0",
"jest": "23.2.0",
"prettier": "^1.13.7",
"raf-stub": "2.0.2",

@@ -50,0 +52,0 @@ "rimraf": "^2.6.2",

70

README.md

@@ -5,15 +5,13 @@ # raf-schd

[![Build Status](https://travis-ci.org/alexreardon/raf-schd.svg?branch=master)](https://travis-ci.org/alexreardon/raf-schd) [![dependencies](https://david-dm.org/alexreardon/raf-schd.svg)](https://david-dm.org/alexreardon/raf-schd) [![npm](https://img.shields.io/npm/v/raf-schd.svg)](https://www.npmjs.com/package/raf-schd) [![SemVer](https://img.shields.io/badge/SemVer-2.0.0-brightgreen.svg)](http://semver.org/spec/v2.0.0.html)
```js
import rafSchedule from 'raf-schd';
import rafSchd from 'raf-schd';
const expensiveFn = (arg) => {
const expensiveFn = arg => {
//...
console.log(arg);
}
};
const schedule = rafSchedule(expensiveFn);
const schedule = rafSchd(expensiveFn);

@@ -60,3 +58,3 @@ schedule('foo');

```js
import rafSchedule from 'raf-schd';
import rafSchd from 'raf-schd';

@@ -67,3 +65,3 @@ function doSomething(scroll_pos) {

const schedule = rafSchedule(doSomething);
const schedule = rafSchd(doSomething);

@@ -77,10 +75,10 @@ window.addEventListener('scroll', function() {

### `rafSchduler`
### `rafSchedule`
```js
type rafSchedule = (fn: Function) => ResultFn
type rafSchedule = (fn: Function) => ResultFn;
// Adding a .cancel property to the WrapperFn
type WrapperFn = (...arg: any[]) => number;
type WrapperFn = (...arg: mixed[]) => void;
type CancelFn = {|

@@ -92,3 +90,3 @@ cancel: () => void,

At the top level `raf-schd` accepts any function a returns a new `ResultFn` (a function that wraps your original function). When executed, the `ResultFn` returns a `number`. This number is the animation frame id. You can cancel a frame using the `.cancel()` property on the `ResultFn`.
At the top level `raf-schd` accepts any function a returns a new `ResultFn` (a function that wraps your original function).

@@ -100,7 +98,7 @@ The `ResultFn` will execute your function with the **latest arguments** provided to it on the next animation frame.

```js
import rafSchedule from 'raf-schd';
import rafSchd from 'raf-schd';
const doSomething = () => {...};
const schedule = rafSchedule(doSomething);
const schedule = rafSchd(doSomething);

@@ -116,10 +114,8 @@ schedule(1, 2);

### Cancelling a frame
### Cancelling a frame with `.cancel`
#### `.cancel`
`raf-schd` adds a `.cancel` property to the `ResultFn` so that it can be easily cancelled. The frame will only be cancelled if it has not yet executed.
```js
const scheduled = rafSchedule(doSomething);
const scheduled = rafSchd(doSomething);

@@ -133,33 +129,19 @@ schedule('foo');

#### `cancelAnimationFrame`
You can use [`cancelAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame) directly to cancel a frame if you like. You can do this because you have the `frameId`.
```js
const scheduled = rafSchedule(doSomething);
const frameId = schedule('foo');
cancelAnimationFrame(frameId);
// now doSomething will not be executed in the next animation frame
```
## Is this a `throttle`, `debounce` or something else?
`raf-schd` is closer to `throttle` than it is `debounce`. It is not like `debounce` because it does not wait for a period of quiet before firing the function.
`raf-schd` is very close to a regular `throttle` function. However, rather than waiting for a fixed period of time before the wrapped function is called (such as `20ms`), `raf-schd` waits for an animation frame.
Lets take a look at the characteristics of this library:
### Differences to `throttle`
### Similarities to `throttle`
- No leading function call. The wrapped function is not called on the first call.
- It batches multiple calls into a single event
- It only executes the wrapped function with the latest argument
- It will not execute anything if the function is not invoked
- One invokation of a scheduled function always results in at least one function call, unless canceled. This is `throttle` with tail calls enabled.
```js
const scheduled = rafSchd(console.log);
### Differences to `throttle`
schedule('foo');
// function not called yet
- Rather than throttling based on time (such as `200ms`, this library throttles based on `requestAnimationFrame`. This allows the browser to control how many frames to provide per second to optimise rendering.
- Individual frames of `raf-schd` can be canceled using `cancelAnimationFrame` as it returns the frame id.
// after an animation frame
// => console.log('foo');
```

@@ -185,3 +167,3 @@ ## Testing your code

```js
import rafSchedule from 'raf-schd';
import rafSchd from 'raf-schd';
```

@@ -194,3 +176,3 @@

```js
const rafSchedule = require('raf-schd').default;
const rafSchd = require('raf-schd').default;
```

13

src/index.js
// @flow
type WrapperFn = (...arg: any[]) => AnimationFrameID;
type WrapperFn = (...args: mixed[]) => void;
type CancelFn = {|

@@ -9,6 +10,6 @@ cancel: () => void,

export default (fn: Function): ResultFn => {
let lastArgs: any[] = [];
let lastArgs: mixed[] = [];
let frameId: ?AnimationFrameID = null;
const wrapperFn: WrapperFn = (...args: any): AnimationFrameID => {
const wrapperFn: WrapperFn = (...args: mixed[]): void => {
// Always capture the latest value

@@ -19,3 +20,3 @@ lastArgs = args;

if (frameId) {
return frameId;
return;
}

@@ -28,4 +29,2 @@

});
return frameId;
};

@@ -46,2 +45,2 @@

return resultFn;
};
};
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc