在做專案中難免會碰到需要實時重新整理，廣告動畫依次出現等等需求，剛最近基於業務需求，需要實現一個累加通話時長的計時器，這時候就需要定時器登上我們的程式碼舞臺了，其實對於計時器，它的原理就是通過定時器來實現的，那麼在寫業務需求之前，我先說說關於定時器的一些知識。

window物件提供了兩個方法來實現定時器的效果，分別是window.setTimeout()和window.setInterval。

在中，程式碼一般都是同步執行的，但定時器卻是非同步執行的。

window.setTimeout(callback,delay);   //callback:回撥函式 delay：時間間隔時長
window.setInterval(callback,delay);

定時器分為隔時定時器setInterval和延時定時器setTimeout

那麼它們兩到底有什麼區別呢？

• setInterval以指定時間為週期迴圈執行，一般用於重新整理表單、複雜動畫的迴圈執行，對於一些表單的實時指定ZtGKxG時間重新整理同步
• setTimeout只在指定時間後執行一次,像有些剛進去會出現一個彈窗廣告，一般都是用的setTimeout
  

瞭解了定時器的基本知識之後,那麼接下來就可以進行功能的實現了。

HTML

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

script

<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;
  
 
   }
  http://www.cppcns.com   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>

這樣，一個簡單的計時器元件就實現好了，其實還有其他的實現思路，如果以後開發碰到了類似的需求，可以借鑑，希望對你們有所幫助。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。