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); 
    } 
} 

あなたがpausableタイマーを実装したい場合は、独自のクラスを作成し、それを使用する必要があります。

また、タイマーの実装にsetIntervalではなくRxJSタイマーを使用することを検討してください。

Answer 3

はplunker例だ[https://plnkr.co/edit/SEh8lBCfl8L9rwHqyWJb?p=preview][1]

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

あなたは間隔のための変数を設定することができます。