如何在Blazor中实现光标闪烁效果？现有定时器方案浏览器未生效

• System.Timers.Timer的Elapsed回调默认执行在线程池线程，不在Blazor的UI同步上下文范围内，你修改hideCursor字段后没有主动触发UI重渲染，因此界面不会同步更新
• 原有代码没有实现定时器释放逻辑，组件销毁后定时器会继续运行，存在内存泄漏风险

<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
    <div class="hero-container">
        <h1>test test</h1>
        <p>I'm tester <span style="@CursorCssClass">|</span></p>
    </div>
</section>
@implements IAsyncDisposable
@code {
    private bool hideCursor = true;
    private System.Timers.Timer aTimer;
    private string CursorCssClass => hideCursor ? "opacity: 0" : "opacity: 1";

    private void ToggleCursor()
    {
        aTimer = new System.Timers.Timer();
        aTimer.Interval = 1000;
        aTimer.Elapsed += OnTimedEvent;
        aTimer.AutoReset = true;
        aTimer.Enabled = true;
    }

    private async void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
    {
        hideCursor = !hideCursor;
        // 封送到UI上下文，主动触发界面重渲染
        await InvokeAsync(StateHasChanged);
    }

    protected override Task OnInitializedAsync()
    {
        ToggleCursor();
        return base.OnInitializedAsync();
    }

    // 组件销毁时释放定时器
    public async ValueTask DisposeAsync()
    {
        if (aTimer != null)
        {
            aTimer.Enabled = false;
            aTimer.Elapsed -= OnTimedEvent;
            await aTimer.DisposeAsync();
        }
    }
}

• 给Elapsed回调加异步逻辑，通过InvokeAsync把重渲染请求封送到Blazor UI同步上下文执行，调用StateHasChanged主动通知界面刷新状态
• 实现IAsyncDisposable接口，组件销毁时主动注销事件、释放定时器，避免内存泄漏

内容的提问来源于stack exchange，提问作者Samuel Khalil