Blazor实现setInterval功能

原创已于 2022-05-02 10:31:48 修改 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Blazor

当前文章被收录于：

Blazor

47 篇文章 6 人学习

记录Blazor开发点滴

订阅专栏查看详情

.NET6

当前文章被收录于：

.NET6

4 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-05-02 10:30:16 首次发布

本文介绍如何在Blazor中利用Timer组件模拟JavaScript的setInterval，通过实例展示了如何设置间隔并更新组件状态。适合理解和应用前端开发中的周期性任务处理。

JavaScript的setInterval是一个实现定时调用的函数，即每隔一段时间重复执行一段逻辑，Blazor可以通过Timer来实现类似功能。示例代码如下：

public class MySlider : ComponentBase {
    private System.Timers.Timer timer;
    private int curIndex = 0;

    [Parameter] public int Interval { get; set; } = 3000;
    [Parameter] public SliderItem[] Items { get; set; }

    protected override void OnInitialized() {
        base.OnInitialized();
        timer = new(Interval);
        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.Start();
    }

    private void OnTimerCallback() {
        _ = InvokeAsync(() => {
            curIndex++;
            if (curIndex >= Items.Length)
                curIndex = 0;
            StateHasChanged();
        }
    }
}