Verwenden von Observable Timer zum Erstellen von Clocking-System

Question

Ich benutze rxjs/Rx in eckigen 2, um eine Uhr zu erstellen und Runde und Sprint Zeit Runden daraus zu machen. Der Codeblock ist wie folgt:
HTML: (app.component.html)

<div class="row"> 
    <div class="col-xs-5"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <h2>Lap Time</h2> 
       <ul *ngFor="let lTime of lapTimes"> 
        <li>{{lTime}}</li> 
       </ul> 
      </div> 
      <div class="col-xs-6"> 
       <h2>Sprint Time</h2> 
       <ul *ngFor="let sTime of sprintTimes"> 
        <li>{{sTime}}</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-5"> 
     <h1>Current Time: {{timeNow}}</h1> 
     <div> 
      <button type="button" class="btn btn-large btn-block btn-default" (click)="onStart()">Start Timer</button> 
      <button type="button" class="btn btn-large btn-block btn-default" (click)="onLoop()">Sprint and Lap</button> 
      <button type="button" class="btn btn-large btn-block btn-default" (click)="onStop()">Stop Timer</button> 
     </div> 
    </div> 
</div> 

Typoskript: (app.component.ts)

import { Component } from '@angular/core'; 
import { Observable, Subscription } from 'rxjs/Rx'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

sprintTimes: number[] = [0]; 
lapTimes: number[] = [0]; 
timeNow: number = 0; 
timer: Observable<any> = Observable.timer(0, 1000); 
subs: Subscription; 

onStart() { 
    this.subs = this.timer.subscribe((value) => { 
    this.tickerFunc(); 
    }); 
    // this.onLoop(); 
} 

onLoop() { 
    this.onLap(); 
    this.onSprint(); 
} 

onSprint() { 
    this.sprintTimes.push(this.timeNow); 
} 

onLap() { 
    this.lapTimes.push(this.timeNow - this.sprintTimes[this.sprintTimes.length - 1]); 
} 

onStop() { 
    this.subs.unsubscribe(); 
} 

tickerFunc() { 
    this.timeNow++; 
} 

} 

Das ist mir erlaubt um eine Taktungsfunktionalität zu erstellen. Aber die Rxjs/Rx ist unzureichend dokumentiert (Es ist schwer für mich, es nur über seine Dokumentation zu verstehen).
Gibt es einen besseren Weg, die Arbeit hier in eckigen zu tun? (Der Hauptzweck von mir hier ist: Ich möchte eine Online-Prüfung/Mock-Test durchführen.)
Wenn ich den Start-Button zweimal drücke, tickt meine Uhr doppelt so schnell. (Ich verstehe dieses Verhalten nicht)
Gibt es noch ein drittes Werkzeug, um das zu erleichtern?

Entschuldigung, dass mein Type Script-Code nicht richtig eingerückt ist, finde ich es schwierig, den Texteditor zu verwenden. Und dies ist auch kein Ort, um Hausaufgaben zu machen.

Answer 1

Wenn ich die Startuhr zweimal drücke, tickt meine Uhr doppelt so schnell. (Ich verstehe nicht, dieses Verhalten)

Nun, wenn Sie auf diese Schaltfläche klicken, können Sie diesen Code ausführen:

this.subs = this.timer.subscribe((value) => { 
    this.tickerFunc(); 
}); 

Also, jedes Mal auf diese Schaltfläche klicken, können Sie einen neuen Timer starten, und jedes Mal, wenn der Timer sendet ein Ereignis (dh jede Sekunde), Sie

tickerFunc() { 
    this.timeNow++; 
} 

So ausführen, wenn Sie die Taste einmal klicken, erhöhen Sie this.timeNow jedes Mal, wenn der Timer abgibt, dh jede Sekunde.

Wenn Sie ein zweites Mal klicken, erhöhen Sie es jedes Mal, wenn der erste Timer ertönt, und jedes Mal, wenn der zweite Timer ertönt. Also, zweimal pro Sekunde.

Es scheint, Sie sollten einen Timer nicht starten, wenn er bereits gestartet ist. Deaktivieren Sie die Schaltfläche, wenn der Timer bereits gestartet wurde.

Answer 2

Sie müssen unsubscribe abbestellen, um den vorherigen Timer zu stoppen.

onStart() { 
    if (this.subs) { 
    this.subs.unsubscribe(); // Stop previous timer 
    } 
    this.subs = this.timer.subscribe((value) => { 
    this.tickerFunc(); 
    }); 
    // this.onLoop(); 
}