【问题标题】：How to do a timer in Angular 5 [closed]如何在Angular 5中做一个计时器[关闭]
【发布时间】：2018-10-31 11:51:18
【问题描述】：

我正在使用 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);
}

【问题讨论】：

你能告诉我们你到目前为止的尝试吗？或者您对卡在哪里有更具体的问题？

标签： angular typescript timer angular5

【解决方案1】：

您可以简单地使用setInterval 在 Angular 中创建这样的计时器，将此代码用于计时器 -

timeLeft: number = 60;
  interval;

startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timeLeft = 60;
      }
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }

<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds Left....</p>

Working Example

另一种使用 Observable 计时器的方法，如下所示 -

import { timer } from 'rxjs';

observableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="observableTimer()">Start Observable timer</p> {{subscribeTimer}}

Working Example

更多信息read here

【讨论】：

改用 observable 的计时器
@blackiii 感谢您的建议，答案已更新！
@PardeepJain 定时器完成后如何调用函数？
你可以检查timeLeft是否=0，调用你的函数
如果您正在寻找具有各种格式选项和功能（如开始/停止/暂停/恢复）的更全面的解决方案，请查看此答案 - stackoverflow.com/a/56230401/1209475

【解决方案2】：

这对于您正在寻找的东西来说可能是多余的，但是您可以使用一个名为 marky 的 npm 包来执行此操作。除了启动和停止计时器之外，它还为您提供了一些额外的功能。你只需要通过npm 安装它，然后在任何你想使用它的地方导入依赖。这是npm 包的链接： https://www.npmjs.com/package/marky

通过npm安装后的使用示例如下：

import * as _M from 'marky';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {
 Marky = _M;
}

constructor() {}

ngOnInit() {}

startTimer(key: string) {
 this.Marky.mark(key);
}

stopTimer(key: string) {
 this.Marky.stop(key);
}

key 只是一个字符串，您正在建立它来识别特定的时间测量。您可以有多个度量值，您可以返回并使用您创建的键引用您的计时器统计信息。

【讨论】：

为什么要使用额外的包只是为了使用一个简单的计时器？
让他可以在任何地方使用它，而无需创建全新的服务或单独的辅助工具。还允许您存储多个不同的计时器统计信息，以便在需要恢复计时器时重新访问。不想说你的答案是错误的，只是想为他提供另一种选择。
另一个不必要的包的例子，它的角度已经支持 setInterval。角度 setInterval 已经支持“多功能性”。在不解释的情况下为他提供另一个选项，您删除控制并添加另一个包进行管理。 medium.com/@alexjamesdunlop/unnecessary-packages-b3623219d86