https://github.com/julienetie/volve

Tiny, Performant Debounce and Throttle Functions.
https://github.com/julienetie/volve

Last synced: 16 days ago
JSON representation

Tiny, Performant Debounce and Throttle Functions.

• Host: GitHub
• URL: https://github.com/julienetie/volve
• Owner: julienetie
• License: mit
• Created: 2016-10-22T03:25:33.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-05T12:31:45.000Z (about 8 years ago)
• Last Synced: 2024-10-23T12:23:08.720Z (2 months ago)
• Language: JavaScript
• Size: 50.8 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Volve

Tiny, Performant Debounce and Throttle Functions.

### Why use these functions?

- Volve **avoids the use of setTimeout and setInterval** for efficency with the exception of the trail option when using debounce.

- No clutter.

- Built with ES6.

- UMD, CJS and ES6 support.

- Supports all browsers from IE5+ with the use of [requestFrame](https://github.com/julienetie/request-frame).

- `npm i --save volve`

- `yarn add volve --save`

### Debounce:

`volve.debounce(,,)`

```javascript

import { debounce } from 'volve'

const helloWorld = (e) => {console.log('Hello World Debounced!', e.target)}

const debounceHelloWorld = debounce(helloWorld, 1000)  // Can only click 1 second after your last click.

document.body.addEventListener('click',debounceHelloWorld, false)

// Hello World! 


```

By default debounce will trail with the first function call, if the lead option {Boolean} is enabled, the callback will be fired after the last batch of calls that fall within conjoining delays.

Consider checkin out: https://css-tricks.com/the-difference-between-throttling-and-debouncing/ for a good explanation.

### Throttle:

`volve.throttle(,)`

```javascript

import { throttle } from 'volve'

const helloWorld = (e) => {console.log('Hello World Throttled!', e.target)}

const throttleHelloWorld = throttle(helloWorld, 1000) // Can only click once in every second.

document.body.addEventListener('click',throttleHelloWorld, false)

// Hello World! 


```

In the two examples above debounce will make the user wait 1000ms until they can trigger a future call.

Throttle will only allow the user trigger a call once within every 1000ms period.

### The Performant Timing Functions collection

Checkout [4d](https://github.com/envidia/4d) which features volve.

MIT License

Copyright (c) 2016 Julien Etienne