Wie man einen timer in den Winkel-5

Ich bin mit Winkel-5.

Möchte ich wissen, wie kann ich starten Sie timing, wenn eine 'play' - Taste betätigt wird, um zu wissen, wie viel Zeit vergangen ist, seit ich geklickt.

Ich würde auch gerne wissen, ob es möglich ist, um den timer zu stoppen und dann in der Lage sein, weiterhin mit der gleichen Zeit vor.

Ich habe es endlich gelöst, meine Frage mit Pardeep Jain beantworten. Obwohl es war nicht genau das, was ich suchte.
Ich wollte nicht, dass ein countdown, wollte ich Sie zählen, die Dauer. Hier ist der code, den ich verwendet habe, am Ende:

time: number = 0;
interval;

startTimer() {
  this.play = true;
  this.interval = setInterval(() => {
    this.time++;
  },1000)
}

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}
  • Können Sie uns zeigen, Ihre versuche so weit? Oder haben Sie eine spezifische Frage, wo Sie stecken?
InformationsquelleAutor Samuel | 2018-05-21
  1. 30

    Können Sie einfach setInterval zu schaffen, wie der timer in den Winkel, Verwenden Sie diesen Code für die timer -

    timeLeft: number = 60;
  interval;

startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timeLeft = 60;
      }
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }

<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds Left....</p>

    Beispiel

    Andere Weise mit den Beobachtbaren timer wie unten -

    import { timer } from 'rxjs';

oberserableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="oberserableTimer()">Start Observable timer</p> {{subscribeTimer}}

    Beispiel

    Weitere Informationen Lesen Sie hier

    • Verwenden Sie timer von beobachtbaren statt
    • vielen Dank für die Anregung, Antwort aktualisiert!
    • Wie kann ich eine Funktion aufrufen, wenn Sie fertig sind timer?
    • Sie können überprüfen, ob timeLeft = 0 ist, die Funktion aufrufen
    • Wenn Sie suchen für eine umfassende Lösung mit verschiedenen Formatierungsmöglichkeiten und Funktionen wie start/stop/pause/resume, check dieses Antwort - stackoverflow.com/a/56230401/1209475
    InformationsquelleAutor Pardeep Jain
  2. 0

    Diese kann overkill für das, was du suchst, aber es ist ein npm-Paket namens marky, die Sie verwenden können, dies zu tun. Es gibt Ihnen ein paar zusätzliche features, die über nur starten und stoppen einen timer.
    Sie brauchen nur, um es zu installieren über npm und importieren Sie dann die Abhängigkeit überall, wo Sie möchten, es zu benutzen.
    Hier ist ein link zu der npm Paket:
    https://www.npmjs.com/package/marky

    Ein Beispiel für die Verwendung nach der Installation via npm wäre wie folgt:

    import * as _M from 'marky';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {
 Marky = _M;
}

constructor() {}

ngOnInit() {}

startTimer(key: string) {
 this.Marky.mark(key);
}

stopTimer(key: string) {
 this.Marky.stop(key);
}

    key ist einfach eine Zeichenkette, die Sie schaffen, zu erkennen, dass insbesondere die Messung der Zeit. Sie können mehrere Maßnahmen, die Sie gehen können, zurück und verweisen Sie Ihre timer Statistiken über die Tasten, die Sie erstellen.

    • Warum extra Paket ist nur mit einem einfachen timer?
    • Gibt ihm die Flexibilität, es überall benutzen, ohne die benötigt wird, um eine ganze neue Dienstleistung oder ein separates Helfer-util. Auch ermöglicht Ihnen das speichern mehrerer, verschiedener timer-stats zu überdenken, wenn er benötigt wird, um fortzusetzen, die timer. Nicht versuchen zu sagen, dass Ihre Antwort falsch, versuchen einfach nur eine weitere option für ihn.
    InformationsquelleAutor bitW0lf
Schreibe einen Kommentar