Question

我有一个播放和一个暂停按钮：

<div *ngIf="!playToggle">
    <button (click)="playTimeLine(); playToggle = true">
        <i class="fa fa-play" aria-hidden="true"></i>
    </button>
</div>
<div *ngIf="playToggle">
    <button (click)="pauseTimeLine(); playToggle = false">
        <i class="fa fa-pause" aria-hidden="true"></i>
    </button>
</div>

如果单击播放按钮，则会调用playTimeLine功能：

currentTime = 0;

playTimeLine(value) {

    setInterval(() => {
        this.currentTime = this.currentTime + 10;
        console.log(this.currentTime);
    }, 1000);
}

我想添加暂停功能，暂停间隔。但它也可以从暂停时恢复它。

Answer 1

假设您想暂停为currentTime添加时间，而不是实际暂停间隔：

向您的班级添加属性，声明间隔：

interval;

将间隔存储在播放功能的属性中：

this.interval = setInterval(() => {
    this.currentTime = this.currentTime + 10;
    console.log(this.currentTime);
}, 1000);

在暂停功能中，清除间隔：

pauseTimeLine(value) {
    clearInterval(this.interval);
}

编辑：请注意，这不是非常精确的时间，但根据您的代码的目的，它可能是可行的。

Answer 2

这是不可能的，因为setInterval既不允许你暂停，也不允许你获取间隔中经过/剩余的时间。您可以简单地创建和清除间隔。

如果您想停止间隔，可以执行以下操作：

timer = null;

startTimer() {
  this.stopTimer();
  this.timer = setInterval(() => { /* do something */ }, 1000);
}

stopTimer() {
  if (this.timer) {
    clearInterval(this.timer);
  }
}

如果您希望实现可暂停的计时器，则需要创建自己的类并使用它。

还可以考虑使用RxJS计时器而不是setInterval来实现计时器。

Answer 3

这里有关于plunker [https://plnkr.co/edit/SEh8lBCfl8L9rwHqyWJb?p=preview][1]

的例子

[1]: https://plnkr.co/edit/SEh8lBCfl8L9rwHqyWJb?p=preview

您可以为间隔设置变量。

如何使用Angular暂停setInterval？

3 个答案: