@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<div>
<button @onclick="@OnStart">Start</button>
</div>
<div>
<button @onclick="@OnStop">Stop</button>
</div>
<div>
Original approach: <span>@StopwatchValue</span>
</div>
<div>
Deriving elapsed time: <span>@Elapsed</span>
</div>
@code {
TimeSpan StopwatchValue { get; set; } = new();
TimeSpan Elapsed { get; set; } = new();
List<DateTime> StartTimes { get; } = new();
List<DateTime> StopTimes { get; } = new();
bool IsRunning { get; set; }
private async Task OnStart()
{
if (IsRunning)
{
return;
}
IsRunning = true;
StartTimes.Add(DateTime.Now);
while (IsRunning)
{
await Task.Delay(1000);
if (IsRunning)
{
StopwatchValue = StopwatchValue.Add(new TimeSpan(0, 0, 1));
Elapsed = GetElapsedTime();
StateHasChanged();
}
}
}
private void OnStop()
{
if (!IsRunning)
{
return;
}
StopTimes.Add(DateTime.Now);
IsRunning = false;
}
private TimeSpan GetElapsedTime()
{
TimeSpan elapsed = new TimeSpan();
for (int i = 0; i < StartTimes.Count - 1; i++)
{
DateTime start = StartTimes[i];
DateTime stop = StopTimes[i];
elapsed += stop - start;
}
elapsed += DateTime.Now - StartTimes.Last();
return elapsed;
}
}