Blazor wasmでタイマーを実装する方法は様々あると思いますが、TimeSpanクラスを使用するのが一番簡単だと思いましたので、まとめてみました。
1. TimeSpanでタイマー設定時刻(時分秒)を定義する
TimeSpanクラスのオブジェクトを生成するには、以下のようにコーディングします。
TimeSpan TimerTime = new TimeSpan(時, 分, 秒);
時、分、秒はint型で指定します。
1 | //タイマー設定時刻(30分) |
2. 1秒ずつ減算する
減算するには、TimeSpanオブジェクトのSubtractメソッドを使用します。
TimeSpan.Subtract(TimeSpan) メソッド
このタイマーは1秒ごとに更新しますので、1秒減算する処理を定義します。
1秒を定義するTimeSpanオブジェクトを使用し、Subtractメソッドの引数に使用します。
1 | //1秒(減算用) |
3. タイマーのカウントダウン処理
一定時間ごとに処理するには、System.Timers.Timer
オブジェクトを使用します。
このタイマーアプリでは、1秒ごとに減算する処理を実行するようにしています。
1 |
|
_timer = new System.Timers.Timer(1000)
で、1秒ごとに処理するよう定義します。
_timer.Elapsed += OnTimedEvent
で、1秒ごとにOnTimedEvent
メソッドを実行するようにしています。
OnTimedEvent
メソッドでは、1秒減算処理と、StateHasChanged()
メソッドを実行しています。
StateHasChanged()
は、Blazorのビューを更新するための命令です。
4. カウントダウンの一時停止
タイマーの一時停止処理を実装します。
先ほどのSystem.Timers.Timer
メソッドのEnabled
をfalse
に設定することで、一時停止を行います。
1 | private void PauseTimer() |
5. リセット処理
タイマーをリセットするには、以下の処理を行います。
- TimeSpanオブジェクトである
TimerTime
を初期値に戻す - カウントダウン中にリセットされることを考慮し、タイマーの一時停止処理である
PauseTimer()
メソッドを呼び出す StateHasChanged()
メソッドで、再表示する
1 |
|
6. ビュー部分
razorページのビューの部分(HTML)は以下のようにしました。
TimerTime.ToString(@"mm\:ss")
で、「分(2桁):秒(2桁)」で表示するようにしています。
1 | <h1>TimeSpan Timer Sample</h1> |
7. 実行イメージ
以下のように、タイマーが表示され、開始、一時停止、リセットができれば成功です。
8. ソースコード全文
1 | @using System.Timers; |