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
This mixin adds reactive data and method to your components:
- 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
- Use
tickeras 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
dateNowas Date.now() persistence that gets updated every secound - update intervals adjustable
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).
MIT