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

2021-01-05 21:10:41

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

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

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

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

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

    //タイマー設定時刻（３０分）
    public static TimeSpan TimerTime = new TimeSpan(0, 30, 0);

2. １秒ずつ減算する

減算するには、TimeSpanオブジェクトのSubtractメソッドを使用します。

TimeSpan.Subtract(TimeSpan) メソッド

このタイマーは１秒ごとに更新しますので、１秒減算する処理を定義します。

１秒を定義するTimeSpanオブジェクトを使用し、Subtractメソッドの引数に使用します。

    //１秒（減算用）
    public static TimeSpan onesec = new TimeSpan(0, 0, 1);

    private void Subtract()
    {
        TimerTime = TimerTime.Subtract(onesec);
    }

3. タイマーのカウントダウン処理

一定時間ごとに処理するには、System.Timers.Timerオブジェクトを使用します。

このタイマーアプリでは、１秒ごとに減算する処理を実行するようにしています。


    //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)で、１秒ごとに処理するよう定義します。

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

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

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

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

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

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

    private void PauseTimer()
    {
        _timer.Enabled = false;
    }

5. リセット処理

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

TimeSpanオブジェクトであるTimerTimeを初期値に戻す
カウントダウン中にリセットされることを考慮し、タイマーの一時停止処理であるPauseTimer()メソッドを呼び出す
StateHasChanged()メソッドで、再表示する


    private void Reset()
    {
        TimerTime = new TimeSpan(0, 30, 0);
        PauseTimer();
        StateHasChanged();
    }

6. ビュー部分

razorページのビューの部分（HTML）は以下のようにしました。

TimerTime.ToString(@"mm\:ss")で、「分（２桁）：秒（２桁）」で表示するようにしています。

<h1>TimeSpan Timer Sample</h1>

<label>@TimerTime.ToString(@"mm\:ss")</label>

<button @onclick="SetTimer">Start</button>

<button @onclick="PauseTimer">Pause</button>

7. 実行イメージ

以下のように、タイマーが表示され、開始、一時停止、リセットができれば成功です。

8. ソースコード全文

@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 {

    //タイマー設定時刻（３０分）
    public static TimeSpan TimerTime = new TimeSpan(0, 30, 0);

    //１秒（減算用）
    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();
    }

}