https://github.com/scaccogatto/vue-throttle-event
throttle events based on requestAnimationFrame
https://github.com/scaccogatto/vue-throttle-event
Last synced: 7 months ago
JSON representation
throttle events based on requestAnimationFrame
- Host: GitHub
- URL: https://github.com/scaccogatto/vue-throttle-event
- Owner: scaccogatto
- License: mit
- Created: 2016-11-24T09:54:42.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-09T09:58:44.000Z (over 7 years ago)
- Last Synced: 2025-03-29T03:41:36.100Z (8 months ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-throttle-event - Throttle events based on requestAnimationFrame. (Components & Libraries / UI Utilities)
- awesome-vue-refactor - vue-throttle-event
- awesome-vue-zh - Vue油门事件 - 基于requestAnimationFrame的节流事件. (UI实用程序 / 事件处理)
- awesome-vue - vue-throttle-event - Throttle events based on requestAnimationFrame. (UI Utilities / Event Handling)
README
# vue-throttle-event
> throttle events based on requestAnimationFrame
## Status
[](https://travis-ci.org/scaccogatto/vue-throttle-event)
## Features
- Uses [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
- Exposes an istance method called `$throttle` in every Vue Component
- Fires a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) when ready
## Installation
### npm
```
$ npm install vue-throttle-event --save-dev
```
### Vue's main.js
```js
import VueThrottleEvent from 'vue-throttle-event'
Vue.use(VueThrottleEvent)
```
## Usage
### Example
```js
methods: {
customEventHandler (e) {
// e.detail.origin is the original event object
// logic here..
}
}
created () {
this.$throttle('mousemove', 'mouse-moved-throttled')
this.$on('mouse-moved-throttled', this.customEventHandler)
}
```
### Arguments
- type (String): the event [type](https://developer.mozilla.org/en-US/docs/Web/Events)
- customEventName (String): the custom event name that will be fired on next requestAnimationFrame
- targetObject (Object) [optional]: the physical [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) where the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) will be fired, defaults on [vm.$el](https://vuejs.org/v2/api/#vm-el)
### Returns
- `function` representing the real function added to the `targetObject`, so you can unbind it when you want
## Testing
This software uses [mocha](https://mochajs.org/) as testing framework
- Clone this repository
- `cd vue-throttle-event`
- `npm install`
- `npm test`
*Feel free to contribute and ask questions*