wake-up-neo.com

Wie man einen Timer in Winkel 5 ausführt

Ich verwende Angular 5.

Ich möchte wissen, wie ich das Timing starten kann, wenn eine Play-Taste gedrückt wird, um zu wissen, wie viel Zeit seit dem Klicken vergangen ist.

Ich würde auch gerne wissen, ob es möglich ist, den Timer zu stoppen und dann mit der gleichen Zeit fortfahren zu können.

Ich habe meine Frage endlich mit der Antwort von Pardeep Jain gelöst. Obwohl es nicht genau das war, wonach ich gesucht hatte ... Ich wollte keinen Countdown, ich wollte die Dauer zählen. Hier ist der Code, den ich am Ende verwendet habe:

time: number = 0;
interval;

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

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}
4
Samuel

Sie können einfach setInterval verwenden, um einen solchen Timer in Angular zu erstellen. Diesen Code für den Timer verwenden -

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>

Arbeitsbeispiel

Ein anderer Weg mit dem 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}}

Arbeitsbeispiel

Weitere Informationen hier lesen

16
Pardeep Jain

Dies ist möglicherweise zu viel für das, wonach Sie suchen, aber es gibt ein npm-Paket mit dem Namen marky, das Sie dazu verwenden können. Es gibt Ihnen ein paar zusätzliche Funktionen, die über das Starten und Stoppen eines Timers hinausgehen. Sie müssen ihn nur über npm installieren und dann die Abhängigkeit überall dort importieren, wo Sie ihn verwenden möchten. Hier ist ein Link zum npm-Paket: https://www.npmjs.com/package/marky

Ein Beispiel für die Verwendung nach der Installation über npm wäre:

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 Zeichenfolge, die Sie zur Ermittlung dieser bestimmten Zeitmessung festlegen. Sie können über mehrere Kennzahlen verfügen, die Sie mit den von Ihnen erstellten Schlüsseln referenzieren können.

0
bitW0lf