Blazor component that can be used as a simple scheduler or performing periodically repeated tasks by calling custom async code. All components work with WebAssembly and Server hosted models. For code examples see usage.
You can try it out by using the demo app.
AdvancedTimer
: Timer object wrapped into a Blazor component to perform async operations on elapsed event.
This component does not render any HTML element. It is wrapped into a component for simpler usage.
Component will allow you to call async
operations, resources automatically disposed by the framework, etc.
It is useful when you need to update UI periodically, e.g. refresh a dashboard in every 30 sec by calling an API endpoint.
NOTE: this technique called 'polling'. Which is not the most efficient way to notify client. Nowadays you can use much more modern techniques. 'push' based communication like: SignalR or WebSecket, etc. Make sure you have no other options than 'polling'.
IntervalInMilisec
:double { get; set; }
(default: 200)
Notification timeout in ms. If set to0 or less
it set to 1 ms.DelayInMilisec
:double { get; set; }
(default: 0)
Delay in ms. before the timer will start. If set to0
timer will start immediately.AutoStart
:bool { get; set; }
(default: true)
Iftrue
timer will start when componentOnInitialized
event run, otherwise timer must be started byIsEnabled
property set totrue
.Occurring
:Times { get; set; }
(default: Times.Once())
Number of times elapsed even will be fired. SeeTimes
record description.IsEnabled
:bool { get; }
Can be set to starttrue
or stopfalse
timer. Returns the inner state of the timer.True
if timer is running otherwisefalse
.
Arbitrary HTML attributes e.g.: id="load1"
can be applied but won't result in HTLM DOM.
OnIntervalElapsed
:EventCallback<ulong>
delegate - Required
Timer event this Function called when specified timeout elapsed, parameter is the iteration count.
- OBSOLETE (set IsEnabled to true):
Start()
:void Start()
Starts the internal timer which will start after the set delay and fire event for the given occurrence times. - OBSOLETE (set IsEnabled to false):
Stop()
:void Stop()
Stops the internal timer and no more event will be fired. Reset()
:void Reset()
Restarts the internal timer and resets the occurrence counter to 0. Events will be fired for the given occurrence times.Dispose()
:implements IDisposable
interface
Component implementsIDisposable
interface Blazor framework will call it when parent removed from render tree.
It is record object wrapping an ulong
value to setting the AdvancedTimer
Occurring
property.
IntervalInMilisec
:ulong { get; }
- Required Returns the set value. Timer will use it for counting elapsed events.
Once()
:Times Once()
Factory method to create a new instance ofTimes
with value:1
.Infinite()
:Times Infinite()
Factory method to create a new instance ofTimes
with value:ulong.MaxValue
.Exactly()
:Times Exactly(ulong count)
Factory method to create a new instance ofTimes
with the given parameter value.
Majorsoft.Blazor.Components.Timer is available on NuGet.
dotnet add package Majorsoft.Blazor.Components.Timer
Use the --version
option to specify a preview version to install.
Add using statement to your Blazor <component/page>.razor
file. Or globally reference it into _Imports.razor
file.
@using Majorsoft.Blazor.Components.Timer
Following code example shows how to use AdvancedTimer
component in your Blazor App. With 2 sec. delay
1 sec. interval occurring only 10 times and with Reset function.
<span>Delayed counter (starts after 2 sec.): <strong>@_count</strong></span>
<AdvancedTimer @ref="_counter" IntervalInMilisec="1000" DelayInMilisec="2000" Occurring="Times.Exactly(10)" OnIntervalElapsed="@(c => Counter(c))" />
<br />
<button class="btn btn-sm btn-primary" @onclick="CounterReset">Reset</button>
@code {
//Counter
private AdvancedTimer _counter;
private ulong _count = 0;
private void Counter(ulong count)
{
_count = count;
}
private void CounterReset() => _counter.Reset();
}
Following code example shows how to use AdvancedTimer
component in your Blazor App. With infinite loop and settable
interval on UI and Start/Stop function used.
<div>
<input type="range" min="100" max="2000" @bind="clockInterval" /> Clock interval: @clockInterval ms.
</div>
<span>Infinite clock (Manual Start): <strong>@_time</strong></span>
<AdvancedTimer IsEnabled="@_clockEnabled" IntervalInMilisec="@clockInterval" Occurring="Times.Infinite()" AutoStart="false" OnIntervalElapsed="@Clock" />
<br />
<button class="btn btn-sm btn-primary" @onclick="StartStopClock">@_buttonText</button>
@code {
//Clock
private double clockInterval = 300;
private string _time = DateTime.Now.ToString("hh:mm:ss.f");
private bool _clockEnabled = false;
private string _buttonText = "Start";
private void Clock()
{
_time = DateTime.Now.ToString("hh:mm:ss.f");
}
private void StartStopClock()
{
if (_clockEnabled)
{
_clockEnabled = false;
_buttonText = "Start";
}
else
{
_clockEnabled = true;
_buttonText = "Stop";
}
}
}