如何在Angular 5中实现支持启停续计时的计时器？

我之前在做Angular 5项目时，刚好遇到了和你一样的需求：点击播放按钮后开始正计时，记录从点击时刻起流逝的时长，同时还要支持暂停计时器，后续能从暂停时的时长继续计时。

一开始我参考了Pardeep Jain的回答，但发现他的方案是针对倒计时的，和我要的正计时需求不契合，于是自己调整了代码，最终实现了符合要求的功能。以下是我实际使用的代码：

time: number = 0;
interval;

startTimer() {
  this.play = true;
  this.interval = setInterval(() => {
    this.time++;
  }, 1000);
}

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}

简单解释下这段代码的逻辑：

• time变量用来存储已经流逝的秒数，初始值设为0
• 调用startTimer()时，会标记播放状态为true，同时通过setInterval每秒让time自增1，以此实现正计时的效果
• 调用pauseTimer()时，会切换播放状态为false，并通过clearInterval清除定时器，这样就能暂停计时，后续再次调用startTimer()就能从当前的time值继续计时了

内容的提问来源于stack exchange，提问作者Samuel