Vue throttle event

throttle events based on requestAnimationFrame

Version: 1.4.0 Updated: 02/02/2017

By: scaccogatto License: MIT

Downloads Last 30 Days: 108

vue-throttle-event

throttle events based on requestAnimationFrame

Status

Build Status

Features

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

Categories: Vue js
Tags: