• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue实现简易计时器组件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue生产和开发环境如何切换及过滤器的使用发布时间:2022-02-05
下一篇:
Vue3异步数据加载组件suspense的使用方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap