vue实现简易计时器组件

在做项目中难免会碰到需要实时刷新，广告动画依次出现等等需求，刚最近基于业务需求，需要实现一个累加通话时长的计时器，这时候就需要定时器登上我们的代码舞台了，其实对于计时器，它的原理就是通过定时器来实现的，那么在写业务需求之前，我先说说关于定时器的一些知识。

window对象提供了两个方法来实现定时器的效果，分别是window.settimeout()和window.setinterval。

在javascript中，代码一般都是同步执行的，但定时器却是异步执行的。

window.settimeout(callback,delay);   //callback:回调函数 delay：时间间隔时长
window.setinterval(callback,delay);

定时器分为隔时定时器setinterval和延时定时器settimeout

那么它们两到底有什么区别呢？

• setinterval以指定时间为周期循环执行，一般用于刷新表单、复杂动画的循环执行，对于一些表单的实时指定时间刷新同步
• settimeout只在指定时间后执行一次,像有些网站刚进去会出现一个弹窗广告，一般都是用的settimeout

了解了定时器的基本知识之后,那么接下来就可以进行功能的实现了。

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 () {
     //建议开启定时器前，先清除定时器，避免定时器累加，出现不可预期的bug
     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>

这样，一个简单的计时器组件就实现好了，其实还有其他的实现思路，如果以后开发碰到了类似的需求，可以借鉴，希望对你们有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。