Angular2秒錶及改良版

初版

代碼：

export class Watches {
    id: number;
    str: string;
}

export let watcheList: Watches[] = [{
    id: 0, str: '123456'
}, {
    id: 1, str: '564822'
}]


//watchList 是一個靜態類
watchList = watcheList;
watchStr: string;

//判斷是否是第一次點擊startWatch
num: number = 0;
//分  秒  毫秒
minute: number = 0;
second: number = 0;
millisecond: number = 0;

//臨時變量  存儲計次時的時間，後加入watcheList數組
temp= {
  id: 0,
  str: '0'
};

//定時器的名字
inter: any;

constructor() { }

 resetWatch() {
     //清零
   this.millisecond = 0;
   this.second = 0;
   this.minute = 0;
   this.temp.str = '000000';
   watcheList.length = 0;
 }

timer() {
    //每隔43ms，調用該函數，所以增加43
 this.millisecond = this.millisecond + 43;
 if (this.millisecond >= 1000) {
    this.millisecond = 0;
    this.second = this.second + 1;
 }
 if (this.second >= 60) {
    this.second = 0;     
    this.minute = this.minute + 1;
 }

//當小於10是，在前面加一個0，形式則變爲00:00:00
  this.watchStr = (this.minute > 10 ? this.minute : '0' + this.minute) + ':'
    + (this.second > 10 ? this.second : '0' + this.second) + ':'
    + (this.millisecond > 10 ? this.millisecond : '0' + this.millisecond);
}

  startWatch(event) {
    this.num = this.num + 1;
    if (this.num > 1) {
      //該狀態應該爲計次
      temp.id = this.watchList.length;
      temp.str = this.watchStr;

      this.watchList.push(temp);
    } else {

      this.inter = setInterval(() => {
        this.timer();
      }, 43);
    }

  }
  stopWatch(event) {
    this.num = 0;
    if (this.inter) {
      clearInterval(this.inter);
    }

  }

}

原理：
在計時器timer函數裏面，定義了一個變量毫秒millisecond,每隔43ms調用timer函數，所以millisecond每次增加43，而後1000ms之後seond增加1,60s之後，minute增加1.
缺點：
函數的運行時間不可控，所以毫秒的增加不準確。

改良版
代碼：

// 秒錶
export class Watches {
    id: number;
    value: number;
}
export let watcheList: Watches[] = []

export class StopwatchComponent {
  //導入的靜態類
  watchList = watcheList;
  //臨時變量，用來存貯計次時的時間
  temp: number;
  //判斷startWatch是第一次開始，還是計次
  num: number = 0;
  //開始時間
  startTime: number;
  //當前時間
  nowTime: number;
  //時間差
  timerRunner: number = 0;
  //interval函數的名稱
  inter: any;
  constructor() { }
  resetWatch() {
    //清零
    this.timerRunner = 0;
    this.watchList.length = 0;
  }
  startWatch(event) {
    this.temp = this.timerRunner;
    //開始計時的時間
    this.startTime = Date.now();
    this.num = this.num + 1;
    if (this.num > 1) {
      //當前狀態爲計時，將計時的數據加入進watchList
      let watchObj: Watches = {
        id: 0,
        value: 0
      }
      watchObj.id = this.watchList.length;
      watchObj.value = this.timerRunner;
      this.watchList.push(watchObj);
    } else {
      this.inter = setInterval(() => {
        this.nowTime = Date.now();
        this.timerRunner = this.temp + this.nowTime - this.startTime;
      }, 43);
    }
  }
  stopWatch(event) {
    this.num = 0;
    if (this.inter) {
      clearInterval(this.inter);
    }
  }
}

原理：當第一次點擊startWatch時，獲取當前時間作爲開始時間，並每43ms觸發定時器，獲取最新時間。時間差則爲最新時間減去開始時間