https://github.com/alterebro/chain-timeout
Execute chained setTimeout functions using requestAnimationFrame to improve performance
https://github.com/alterebro/chain-timeout
chain chainable chainable-functions delay queue requestanimationframe settimeout timeout
Last synced: 3 months ago
JSON representation
Execute chained setTimeout functions using requestAnimationFrame to improve performance
- Host: GitHub
- URL: https://github.com/alterebro/chain-timeout
- Owner: alterebro
- License: mit
- Created: 2019-04-23T11:28:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-30T08:51:49.000Z (over 1 year ago)
- Last Synced: 2025-09-19T04:54:58.945Z (7 months ago)
- Topics: chain, chainable, chainable-functions, delay, queue, requestanimationframe, settimeout, timeout
- Language: JavaScript
- Homepage: https://npm.im/chain-timeout
- Size: 763 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/alterebro/chain-timeout/blob/master/LICENSE) [](https://www.npmjs.com/package/chain-timeout) [](https://unpkg.com/chain-timeout/dist/chain-timeout.min.js) [](https://twitter.com/alterebro)
# chain-timeout
**Execute chained setTimeout functions using requestAnimationFrame to improve performance**.
By using `requestAnimationFrame` the timeout defined will only run when the document is active, if the document browser or tab is placed on background the script won't be executed therefore performance will not be affected and battery life will be saved :)
## Install
```sh
$ npm install chain-timeout
```
This module is available in three flavours:
| Flavour | Path |
| ------------- | ------------- |
| **ES Module** | `dist/chain-timeout.mjs` |
| **CommonJS** | `dist/chain-timeout.js` |
| **UMD** | `dist/chain-timeout.min.js` |
Include `chain-timeout`:
```javascript
// ES6
import chainTimeout from 'chain-timeout'
// CJS
const chainTimeout = require('chain-timeout');
```
To use it on the browser include the UMD minified file ( `dist/chain-timeout.min.js` ).
You can also add the script directly from [unpkg.com](https://unpkg.com/chain-timeout):
```html
```
## Usage
Include it and create a *chain* :
```javascript
import chainTimeout from 'chain-timeout';
const chain = chainTimeout( fn, delay ).chainTimeout( fn, delay )...
```
Example :
```javascript
const chain = chainTimeout( () => console.log('hello!'), 2000 )
.chainTimeout( () => console.log('...'), 3000 )
.chainTimeout( () => console.log('bye!'), 1000 );
/*
-> Outputs the string 'hello!' after 2000ms.
-> Then outputs the string '...' 3000ms after the first message.
-> Finally outputs 'bye!' when 1000ms have passed since previous function.
*/
```
## API
### chainTimeout(function, delay)
Returns an `Object` with `chainTimeout()` itself to get chained and `clear()` method to cancel the execution chain.
#### — function
Type : `function`. Function to get executed once the time set on the delay is reached
#### — delay
Type : `number`. Number defining the milliseconds to wait before the function is executed.
### chain.clear()
Cancels the execution chain.
```javascript
const chain = chainTimeout(fn, delay)
.chainTimeout(fn, delay)
.chainTimeout(fn, delay):
chain.clear() // Cancels chain
```
## License
MIT © 2019 [Jorge Moreno](https://moro.es), [@alterebro](https://twitter.com/alterebro)