如何使用Angular暂停setInterval？

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 

可以为时间间隔设置变量。