Comparing version 3.0.1 to 4.0.0
@@ -15,3 +15,3 @@ 'use strict'; | ||
if (frameId) { | ||
return frameId; | ||
return; | ||
} | ||
@@ -23,4 +23,2 @@ | ||
}); | ||
return frameId; | ||
}; | ||
@@ -27,0 +25,0 @@ |
@@ -13,3 +13,3 @@ var index = (function (fn) { | ||
if (frameId) { | ||
return frameId; | ||
return; | ||
} | ||
@@ -21,4 +21,2 @@ | ||
}); | ||
return frameId; | ||
}; | ||
@@ -25,0 +23,0 @@ |
@@ -19,3 +19,3 @@ (function (global, factory) { | ||
if (frameId) { | ||
return frameId; | ||
return; | ||
} | ||
@@ -27,4 +27,2 @@ | ||
}); | ||
return frameId; | ||
}; | ||
@@ -31,0 +29,0 @@ |
@@ -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}}); |
{ | ||
"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", |
@@ -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; | ||
``` |
// @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; | ||
}; | ||
}; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
16
9423
123
169