[Blazor] 利用AdvancedTimer定时刷新页面

科控物联

发布于 2023-09-22 20:15:20

7880

发布于 2023-09-22 20:15:20

文章被收录于专栏：科控自动化科控自动化

Blazor 组件，可用作简单的计划程序或执行定期重复的任务通过调用自定义异步代码。所有组件都适用于 WebAssembly 和服务器托管模型。有关代码示例，请参阅用法。

您可以使用演示应用程序试用它。

组件

高级计时器：包装到 Blazor 组件中的计时器对象，用于对已用事件执行异步操作。

`AdvancedTimer`元件

此组件不呈现任何 HTML 元素。它被包装到一个组件中，以便于使用。组件将允许您调用操作，框架自动释放的资源等。当您需要定期更新 UI 时，例如，通过async调用 API 端点每 30 秒刷新一次仪表板，这非常有用。

注意：此技术称为“轮询”。这不是通知客户的最有效方式。如今您可以使用更现代的技术。基于“推送”的通信，如：SignalR 或 WebSecket 等。确保您除了“轮询”之外没有其他选择。

性能

IntervalInMilisec： double { get; set; } （默认值：200）通知超时（以毫秒为单位）。如果设置为小于等于0将设置为 1 毫秒。
DelayInMilisec： double { get; set; } （默认值：0）计时器启动前的延迟（以毫秒为单位）。如果设置为0计时器将立即启动。
AutoStart： bool { get; set; } （缺省值：true）如果true计时器将在组件OnInitialized事件运行时启动，否则计时器必须由设置为IsEnabled 的属性启动。
发生次数：时间 { get; set; } （默认值：Times.Once（））触发的次数Times。
IsEnabled： bool { get; } 可以设置为true启动或false停止计时器。返回计时器的内部状态。如果计时器正在运行true，否则false

可以应用任意 HTML 属性，例如：id=“load1”，但不会导致 HTLM DOM。

事件

OnIntervalElapsed： EventCallback<ulong> delegate - 必需计时器事件此函数在指定的超时时间过后调用，参数为迭代计数。

功能

过时（将 IsEnabled 设置为 true）：Start（）： void Start（） 启动内部计时器，该计时器将在给定发生时间的设置延迟和触发事件后启动。
已过时（将 IsEnabled 设置为 false）：Stop（）：void Stop（） 停止内部计时器，不再触发任何事件。
Reset（）： void Reset（） 重新启动内部计时器并将发生计数器重置为 0。将在给定的发生时间内触发事件。
Dispose（）：实现 IDisposable 接口组件实现IDisposable接口 Blazor 框架将在从渲染树中删除父级时调用它。

时代记录

它是记录对象包装值以设置属性。ulongAdvancedTimerOccurring

性能

IntervalInMilisec： ulong { get; } - 必需返回设置值。计时器将使用它来计算已用事件。

功能

Once（）： Times Once（） Times1
Infinite（）： times Infinite（） FTimes =ulong.MaxValue
Exactly（）：时间精确（ulong count） 工厂方法，以创建具有给定参数值的Times新实例。

配置

安装

Majorsoft.Blazor.Components.Timer 可在 NuGet 上使用。

dotnet add package Majorsoft.Blazor.Components.Timer

用法

将 using 语句添加到 Blazor <component/page>.razor文件。或者将其全局引用到_Imports.razor文件中。

@using Majorsoft.Blazor.Components.Timer

下面的代码示例演示如何在 Blazor 应用中使用高级计时器组件。延迟 2 秒 1秒间隔仅发生10次，并具有复位功能。

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

下面的代码示例演示如何在 Blazor 应用中使用高级计时器组件。具有无限循环和可设置 UI的间隔和使用启动/停止功能。

@page "/TimeTest2"
<h3>高级计时器组件模板：自动运行，间隔时间刷新</h3>

<div>
  <AdvancedTimer IsEnabled="@_clockEnabled" IntervalInMilisec="@clockInterval" Occurring="Times.Infinite()" AutoStart="true" OnIntervalElapsed="@Clock" />

  间隔: <input type="number" min="100" max="5000" @bind="clockInterval" />ms.
  <input type="range" min="100" max="5000" @bind="clockInterval" />
  <button class="btn btn-sm btn-primary" @onclick="StartStopClock">@_buttonText</button>

  <span>刷新次数：<strong>@_count</strong> 时间 : <strong>@_time</strong></span>
</div>
@code {
  //Clock
  private ulong _count = 0;

  private double clockInterval = 1000;
  private string _time = DateTime.Now.ToString("hh:mm:ss.f");
  private bool _clockEnabled = true;
  private string _buttonText = "停止";
  private void Clock() {
    _count++;
    _time = DateTime.Now.ToString("hh:mm:ss.f");
  }
  private void StartStopClock() {
    _buttonText = _clockEnabled ? "启动" : "暂停";
    _clockEnabled = !_clockEnabled;

  }
}