Wie setze ich setInterval mit Angular?

Question

Ich habe ein Spiel und eine Pause-Taste:

<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> 

Wenn die Play-Taste geklickt wird, ruft es die playTimeLine Funktion:

currentTime = 0; 

playTimeLine(value) { 

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

Ich mag würde eine Pause-Funktion hinzuzufügen, die das Intervall pausiert. Aber es macht es auch möglich, es von dem Punkt fortzusetzen, an dem es angehalten wurde.

Answer 1

Angenommen, Sie Hinzufügen Zeit, um Ihre current anhalten möchten, und nicht wirklich das Intervall Pause:

ein Attribut der Klasse Fügen Sie das Intervall erklärt:

interval; 

Lagern Sie das Intervall in dem Attribut in Ihre Play-Funktion:

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

In einer Pause-Funktion, deaktivieren Sie das Intervall:

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

EDIT: Beachten Sie, dass dies nicht sehr genaue Timing ist, aber je nach dem Zweck Ihres Codes könnte es praktikabel sein.

Answer 2

Dies ist nicht möglich, da setInterval weder die Pause erlaubt, noch Ihnen erlaubt, die verstrichene/verbleibende Zeit im Intervall abzurufen. Sie können Intervalle einfach erstellen und löschen.

Wenn Sie das Intervall stoppen wollte, Sie Folgendes tun können:

timer = null; 

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

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

Wenn Sie einen pausable Timer implementieren möchten, müssen Sie Ihre eigene Klasse erstellen und nutzen.

Verwenden Sie auch RxJS-Timer anstelle von setInterval für die Implementierung Ihres Timers.

Answer 3

hier Beispiel in Plunker [https://plnkr.co/edit/SEh8lBCfl8L9rwHqyWJb?p=preview][1]

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

Sie Variable für Intervall einstellen.