https://github.com/reinerBa/Vue-Interval

A vuejs mixin to call methods and update variables in intervals
https://github.com/reinerBa/Vue-Interval

interval time-interval vue-interval vue-mixin vuejs vuejs2

Last synced: 13 days ago
JSON representation

A vuejs mixin to call methods and update variables in intervals

• Host: GitHub
• URL: https://github.com/reinerBa/Vue-Interval
• Owner: reinerBa
• License: mit
• Created: 2016-12-16T21:05:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-17T22:00:21.000Z (5 months ago)
• Last Synced: 2024-05-19T04:21:25.597Z (about 1 month ago)
• Topics: interval, time-interval, vue-interval, vue-mixin, vuejs, vuejs2
• Language: JavaScript
• Homepage: https://reinerba.github.io/Vue-Interval/
• Size: 1.15 MB
• Stars: 10
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue-refactor - Vue-Interval

README

        
# Vue-Interval

[![NPM](https://nodei.co/npm/vue-interval.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-interval/)

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](https://reinerba.github.io/Vue-Interval/Demo.html "Demo")

# 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)

    

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