🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An interval mixin to call static vue-functions in an interval, update values, get current time and dynamic interval management.

Date _Time

Documentation

Vue-Interval

NPM

An interval mixin to call static vue-functions in an interval, update values, get current time and dynamic interval management

  • Dependencies: Only Vue.js 2.0
  • Browsers tested: Chrome, Firefox and IE10+
  • Demo: link

Features

This mixin adds reactive data and method to your components:

Functions

  • Automatically recognize Vue-Element methods that starts with Interval__[Timeinterval]$ as interval methods and execute/stop them on dismount
  • Add new intervals with setVueInterval
  • Add new intervals with callback function after exceeding interval limit
  • Remove manually setted intervals with removeVueInterval
  • Suspend manually setted intervals with suspendVueInterval
  • Remove manually setted intervals with suspendVueInterval

Properties

  • Use ticker as a simple secound counter since creation (the interval can be adjusted)
  • or to update the value non-reactive variables in computed properties every secound
  • use dateNow as Date.now() persistence that gets updated every secound
  • update intervals adjustable

Usage

It's available as npm package now and has a module defintion file for webpack

npm install vue-interval -s import vueinterval from 'vue-interval/dist/VueInterval.common' 

To make the mixin globally available for every instance or component just add the script in the head tag (or somewhere in the body)

<script src="VueInterval.js" type="text/javascript"></script> 

And add it to the desired components

new Vue({     el: "#app",     mixins:[vueinterval],     data: {...},     methods: {       INTERVAL__1e3$ping: function () {         console.log('Another secound has passed')       }     }, 

After this you can use the interval variables ticker and dateNow. The first variable just counts up from zero every secound, where 0 is the moment when the component was created. The secound variable is the current Date.now() which is also updated every secound.

To write a method in your component which is triggered in interval just use the prefix INTERVAL__[timeperiod]$ with timeperiod as number like:

INTERVAL__1e4$myUpdateMethod: function (a) {         Ajax.get('/update/opentasks');     } 

This method for instance will make an ajax call every 10 secounds (1e4 => 10.000ms).

License

MIT


You May Also Like