Vue implements a simple timer component

When doing a project, it is inevitable to encounter requirements such as real-time refresh, advertisement animations appearing in sequence, etc. Recently, based on business needs, it is necessary to implement a timer for accumulating call duration. At this time, the timer is needed to enter our code stage. In fact, for the timer, its principle is to be realized through the timer. So before writing business requirements, let me talk about some knowledge about timers.

The window object provides two methods to implement the timer effect, namely window.setTimeout() and window.setInterval.

In Javascript, code is generally executed synchronously, but timers are executed asynchronously.

window.setTimeout(callback,delay); //callback: callback function delay: time interval window.setInterval(callback,delay);

Timers are divided into interval timer setInterval and delay timer setTimeout

So what is the difference between the two?

• setInterval is executed in a cycle with a specified time period. It is generally used to refresh forms and execute complex animations in a cycle. It is also used to refresh and synchronize some forms at a specified time in real time.
• setTimeout is only executed once after a specified time. For example, some websites will display a pop-up advertisement when you first enter them. Generally, setTimeout is used.
  

After understanding the basic knowledge of timers, you can then implement the functions.

HTML

<template>
    <div class="timer">
    <div>{{nowTime}}</div>
    </div>
</template>

Javascript

<script>
    export default {
    name: 'Timer',
    data () {
     return {
      timer: null,
      nowTime:"",
      hour: 0,
      minutes: 0,
      seconds: 0
      }
    },
    created () {
    this.timer = setInterval(this.startTimer, 1000);
    },
    destroyed () {
    clearInterval(this.timer);
    },
    
    methods: {
    startTimer () {
     //It is recommended to clear the timer before starting it to avoid unexpected bugs caused by timer accumulation.
     if(this.timer) {
   clearInterval(this.timer);
  }
     this.seconds += 1;
     if (this.seconds >= 60) {
      this.seconds = 0;
      this.minutes = this.minutes + 1;
     }
     if (this.minutes>= 60) {
      this.minutes = 0;
      this.hour = this.hour + 1;
     }
     this.nowTime = this.toZero(this.hour): this.toZero(this.minutes): this.toZero(this.seconds)
    },
     toZero(timeNumber) {
     return timeNumber<10?"0"+timeNumber：timeNumber
   },
 }
}
</script>

In this way, a simple timer component is implemented. In fact, there are other implementation ideas. If you encounter similar requirements in future development, you can refer to them. I hope it will be helpful to you.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.