使用打字稿创建计数计时器

Question

我的 Angular 项目中的 setInterval() 有问题

这是我的代码

    recordingTimer: any = '00:00:00';
  timer: boolean = true;
  recording(){
    ////// please type recording meeting functionality here
    if (this.timer) {
      let seconds = 0;
      let minutes = 0;
      let hours = 0;

      seconds += 1;

      if (seconds >= 60) {
        seconds = 0;
        minutes += 1

        if (minutes >= 60) {
          minutes = 0;
          hours += 1
        }
      }

      /// update recording time
      this.recordingTimer = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
      console.log(this.recordingTimer)

    }


  }

  repeat() {
    setInterval(() => this.recording(), 1000);
  }

为什么 console.log 语句重复但具有相同的值“00:00:01”

请帮忙，谢谢。

Answer 1

因为变量小时秒分钟是函数的本地变量，并且在每次调用时都为零。所以试试这个

//class variables

       seconds = 0;
       minutes = 0;
       hours = 0;

recording(){
    ////// please type recording meeting functionality here
    if (this.timer) {

      this.seconds += 1;

      if (this.seconds >= 60) {
        this.seconds = 0;
        this.minutes += 1

        if (this.minutes >= 60) {
          this.minutes = 0;
          this.hours += 1
        }
      }

      console.log(this.hours, this.minutes, this.seconds);

      /// update recording time
      this.recordingTimer = (this.hours ? (this.hours > 9 ? this.hours : "0" + this.hours) : "00") + ":" + (this.minutes ? (this.minutes > 9 ? this.minutes : "0" + this.minutes) : "00") + ":" + (this.seconds > 9 ? this.seconds : "0" + this.seconds);
      console.log(this.recordingTimer)

    }

清除计时器时也不要忘记清除这些变量

Answer 2

这里有一个简单的计时器示例：

export class AppComponent {
  startTime: Date;
  stopTime: Date;
  active: boolean = false
  get display() { return (this.startTime && this.stopTime) ? +this.stopTime - +this.startTime : 0 }

  timer() {
    if (this.active) {
      this.stopTime = new Date()
      setTimeout(()=>{
        this.timer()
      }, 1000)
    }
  }

  start() {
    this.startTime = new Date()
    this.stopTime = this.stopTime
    this.active = true
    this.timer()
  }

  stop() {
    this.stopTime = new Date()
    this.active = false
  }
}

您可以在https://stackblitz.com/edit/angular-ivy-jezrv3看到它的实际应用

编辑

根据https://stackblitz.com/edit/angular-ivy-nds8jp 的要求，一个带有暂停和恢复的简单计时器