Simple mixin to manage timers or intervals for Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue-timers/dist/vue-timers.umd.js"></script>
npm install vue-timers
yarn add vue-timers
import Vue from 'vue'
import VueTimers from 'vue-timers'
Vue.use(VueTimers)import {mixin as VueTimers} from 'vue-timers'
export default {
mixins: [VueTimers]
}nuxt.config.js:
export default {
plugins: [
{ src: '~/plugins/vue-timers', mode: 'client' }
]
}plugins/vue-timers.js:
import Vue from 'vue'
import VueTimers from 'vue-timers'
Vue.use(VueTimers)It creates timer instances in components and slightly reduces boilerplate code with their handling.
See the following code
export default {
methods: {
log () {
console.log('Hello world')
}
},
created () {
// It looks OK for the first look
// But imagine that you have more than one timer
this.$options.interval = setInterval(this.log, 1000)
// Ok? What about check if timer works?
// And it's not reactive so you should create data option
console.log(this.$options.interval !== null)
// Still ok? So what about reusable timers?
// New method for that? Rly?
},
// Did you forget that it should be destroyed?
beforeDestroy () {
clearInterval(this.$options.interval)
}
}It's ugly, isn't it? So let's try to fix this :)
Same code with vue-timers:
export default {
timers: {
log: { time: 1000, autostart: true }
},
methods: {
log () {
console.log('Hello world')
}
}
}{
// Name of timer
// Default: timer key (with object notation)
name: String,
// Tick callback or method name from component
// Note: callback is binded to component instance
// Default: name
callback: Function/String,
// Autostart timer from created hook
// Default: false
autostart: Boolean,
// Set true to repeat (with setInterval) or false (setTimeout)
// Default: false
repeat: Boolean,
// Set true to call first tick immediate
// Note: repeat must be true too
// Default: false
immediate: Boolean,
// Time between ticks
// Default: 1000
time: Number
// Switch timer`s status between activated and deactivated
// Default: false
isSwitchTab: Boolean
}this.timers.log.time = 2000NOTE: you should restart timer to apply changes
// Starts `log` timer
this.$timer.start('log')
// Stops `log` timer
this.$timer.stop('log')this.timers.log.isRunningimport { timer } from 'vue-timers'
export default {
timers: [
timer('log', 1000)
],
methods: {
log () {
console.log('It works!')
}
}
}<template>
<timer-component
@timer-start:log="timerStarted"
@timer-stop:log="timerStopped"
@timer-tick:log="timerTicked"
/>
</template>export default {
timers: {
log: { time: 1000, ...options }
}
}export default {
timers: [
{ name: 'log', time: 1000, ...options }
]
}import { timer } from 'vue-timers'
export default {
timers: [
timer('log', 1000, { ...options })
]
}MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent