\

Blazorwasmで簡単にタイマーを実装する方法(TimeSpan利用)

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

1. TimeSpanでタイマー設定時刻(時分秒)を定義する

TimeSpanクラスのオブジェクトを生成するには、以下のようにコーディングします。

TimeSpan TimerTime = new TimeSpan(時, 分, 秒);

時、分、秒はint型で指定します。

TimeSpan 構造体

1
2
//タイマー設定時刻(30分)
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
//1秒(減算用)
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

//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();
}

_timer = new System.Timers.Timer(1000)で、1秒ごとに処理するよう定義します。

_timer.Elapsed += OnTimedEventで、1秒ごとにOnTimedEventメソッドを実行するようにしています。

OnTimedEventメソッドでは、1秒減算処理と、StateHasChanged()メソッドを実行しています。

StateHasChanged()は、Blazorのビューを更新するための命令です。

4. カウントダウンの一時停止

タイマーの一時停止処理を実装します。

先ほどのSystem.Timers.TimerメソッドのEnabledfalseに設定することで、一時停止を行います。

1
2
3
4
private void PauseTimer()
{
_timer.Enabled = false;
}

5. リセット処理

タイマーをリセットするには、以下の処理を行います。

  1. TimeSpanオブジェクトであるTimerTimeを初期値に戻す
  2. カウントダウン中にリセットされることを考慮し、タイマーの一時停止処理であるPauseTimer()メソッドを呼び出す
  3. 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();
}

}

コメントシステムを導入しました!コメント頂けると嬉しすぎて、光の速さで返信します(●´ω`●)

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱