vue-throttle-event

throttle events based on requestAnimationFrame

Status

Features

• Uses requestAnimationFrame
• Exposes an istance method called $throttle in every Vue Component
• Fires a CustomEvent when ready

Installation

npm

$ npm install vue-throttle-event --save-dev

Vue's main.js

import VueThrottleEvent from 'vue-throttle-event'
 
Vue.use(VueThrottleEvent)

Usage

Example

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
• customEventName (String): the custom event name that will be fired on next requestAnimationFrame
• targetObject (Object) [optional]: the physical EventTarget where the CustomEvent will be fired, defaults on 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 as testing framework

• Clone this repository
• cd vue-throttle-event
• npm install
• npm test

Feel free to contribute and ask questions