web-dev-qa-db-ja.com

Angular 5でタイマーを実行する方法

Angular 5。

クリックしてから経過した時間を知るために、「再生」ボタンが押されたときにタイミングを開始する方法を知りたい。

また、タイマーを停止してから前の同じ時間に続行できるかどうかも知りたいです。

Pardeep Jainの回答で私の質問をようやく解決しました。それはまさに私が探していたものではありませんでしたが。私はカウントダウンが欲しくなかった、私は期間を数えたかった。最後に使用したコードは次のとおりです。

time: number = 0;
interval;

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

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

単にsetIntervalを使用して、Angularでこのようなタイマーを作成し、タイマーにこのコードを使用することができます-

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>

実施例

以下のようなObservableタイマーを使用する別の方法-

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

実施例

詳細については こちらをご覧ください

16
Pardeep Jain

これはあなたが探しているものにとってはやり過ぎかもしれませんが、これを行うために使用できるmarkyというnpmパッケージがあります。タイマーを開始および停止するだけでなく、いくつかの追加機能を提供します。 npm経由でインストールし、使用したい場所に依存関係をインポートするだけです。 npmパッケージへのリンクは次のとおりです。 https://www.npmjs.com/package/marky

Npm経由でインストールした後の使用例は次のとおりです。

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は、特定の時間の測定値を識別するために確立している単なる文字列です。作成したキーを使用して、戻ってタイマーの統計情報を参照できる複数のメジャーを持つことができます。

0
bitW0lf