Blazor wasmでタイマーを実装する方法は様々あると思いますが、TimeSpanクラスを使用するのが一番簡単だと思いましたので、まとめてみました。

1. TimeSpanでタイマー設定時刻(時分秒)を定義する
TimeSpanクラスのオブジェクトを生成するには、以下のようにコーディングします。
TimeSpan TimerTime = new TimeSpan(時, 分, 秒);
時、分、秒はint型で指定します。
TimeSpan 構造体
1 2
| public static TimeSpan TimerTime = new TimeSpan(0, 30, 0);
|
2. 1秒ずつ減算する
減算するには、TimeSpanオブジェクトのSubtractメソッドを使用します。
TimeSpan.Subtract(TimeSpan) メソッド
このタイマーは1秒ごとに更新しますので、1秒減算する処理を定義します。
1秒を定義するTimeSpanオブジェクトを使用し、Subtractメソッドの引数に使用します。
1 2 3 4 5 6 7
| public static TimeSpan onesec = new TimeSpan(0, 0, 1);
private void Subtract() { TimerTime = TimerTime.Subtract(onesec); }
|
3. タイマーのカウントダウン処理
一定時間ごとに処理するには、System.Timers.Timer
オブジェクトを使用します。
このタイマーアプリでは、1秒ごとに減算する処理を実行するようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
private System.Timers.Timer _timer;
private void SetTimer() { _timer = new System.Timers.Timer(1000); _timer.Elapsed += OnTimedEvent; _timer.AutoReset = true; _timer.Enabled = true; }
private void OnTimedEvent(Object source, ElapsedEventArgs e) { Subtract(); StateHasChanged(); }
|
_timer = new System.Timers.Timer(1000)
で、1秒ごとに処理するよう定義します。
_timer.Elapsed += OnTimedEvent
で、1秒ごとにOnTimedEvent
メソッドを実行するようにしています。
OnTimedEvent
メソッドでは、1秒減算処理と、StateHasChanged()
メソッドを実行しています。
StateHasChanged()
は、Blazorのビューを更新するための命令です。
4. カウントダウンの一時停止
タイマーの一時停止処理を実装します。
先ほどのSystem.Timers.Timer
メソッドのEnabled
をfalse
に設定することで、一時停止を行います。
1 2 3 4
| private void PauseTimer() { _timer.Enabled = false; }
|
5. リセット処理
タイマーをリセットするには、以下の処理を行います。
- TimeSpanオブジェクトである
TimerTime
を初期値に戻す
- カウントダウン中にリセットされることを考慮し、タイマーの一時停止処理である
PauseTimer()
メソッドを呼び出す
StateHasChanged()
メソッドで、再表示する
1 2 3 4 5 6 7
| private void Reset() { TimerTime = new TimeSpan(0, 30, 0); PauseTimer(); StateHasChanged(); }
|
6. ビュー部分
razorページのビューの部分(HTML)は以下のようにしました。
TimerTime.ToString(@"mm\:ss")
で、「分(2桁):秒(2桁)」で表示するようにしています。
1 2 3 4 5 6 7
| <h1>TimeSpan Timer Sample</h1>
<label>@TimerTime.ToString(@"mm\:ss")</label>
<button @onclick="SetTimer">Start</button>
<button @onclick="PauseTimer">Pause</button>
|
7. 実行イメージ
以下のように、タイマーが表示され、開始、一時停止、リセットができれば成功です。

8. ソースコード全文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| @using System.Timers; @page "/"
<h1>TimeSpan Timer Sample</h1>
<label>@TimerTime.ToString(@"mm\:ss")</label>
<button @onclick="SetTimer">Start</button>
<button @onclick="PauseTimer">Pause</button>
<button @onclick="Reset">Reset</button>
@code {
//タイマー設定時刻(30分) public static TimeSpan TimerTime = new TimeSpan(0, 30, 0);
//1秒(減算用) public static TimeSpan onesec = new TimeSpan(0, 0, 1);
//Timerオブジェクト(タイマー処理) private System.Timers.Timer _timer;
private void SetTimer() { _timer = new System.Timers.Timer(1000); _timer.Elapsed += OnTimedEvent; _timer.AutoReset = true; _timer.Enabled = true; }
private void OnTimedEvent(Object source, ElapsedEventArgs e) { Subtract(); StateHasChanged(); }
private void PauseTimer() { _timer.Enabled = false; }
private void Subtract() { TimerTime = TimerTime.Subtract(onesec); }
private void Reset() { TimerTime = new TimeSpan(0, 30, 0); PauseTimer(); StateHasChanged(); }
}
|
About Me
11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱