Blazor中Task.Run的开始、暂停、继续、停止与计时取消实现

在 Blazor 中实现线程控制：开始、暂停、继续、停止与定时取消

在现代 Web 开发中，异步编程是提升用户体验的关键。Blazor 作为一个强大的框架，允许开发者使用 C# 和 .NET 来构建交互式 Web 应用。在 Blazor 中，我们可以利用 Task.Run 来实现多线程操作，从而在后台执行耗时任务，而不阻塞用户界面。本文将介绍如何在 Blazor 中实现线程的开始、暂停、继续、停止和定时取消功能。

1. 项目背景

在许多应用场景中，我们可能需要执行一些耗时的操作，比如数据处理、文件上传等。在这些情况下，用户界面需要保持响应，以便用户可以继续与应用交互。Blazor 提供了良好的支持，使得我们可以轻松地在后台运行任务，并通过 UI 控件来控制这些任务的执行状态。

2. 功能概述

我们将实现一个简单的 Blazor 组件，允许用户：

• 开始一个新的线程。
• 暂停当前运行的线程。
• 继续暂停的线程。
• 停止线程的执行。
• 定时取消线程，设置一个时间限制，超时后自动停止线程。

3. 代码实现

以下是实现上述功能的完整代码示例：

Task.razor

@page "/Task"
<div class="main">
    <h1>线程控制</h1>
    <p role="status" style="margin:20px 0;">提示信息: @_message</p>
    <p>当前状态: @_status</p>
    <button @οnclick="Start" style="margin-right:20px;">开始</button>
    <button @οnclick="Pause" style="margin-right:20px;">暂停</button>
    <button @οnclick="Continue" style="margin-right:20px;">继续</button>
    <button @οnclick="Stop" style="margin-right:20px;">停止</button>
    <input type="number" @bind-value="@_milliseconds" min="0" />
    <button @οnclick="Timing" style="margin-right:20px;">定时取消</button>
</div>

@code {
    private string _message = "";
    private string _status = "未开始";
    private CancellationTokenSource? _tokenSource;
    private ManualResetEvent? _manualReset;
    private int _milliseconds = 1000;
    private int _maxRuns = 10; // 最大运行次数
    private int _currentRuns = 0; // 当前运行次数

    private void Start() {
        if (_tokenSource != null) {
            Pause();
            Thread.Sleep(200);
            _message = "一次只能创建一个线程！请点击继续开启当前线程！";
            StateHasChanged();
            return;
        }

        _tokenSource = new();
        _manualReset = new(true);
        _currentRuns = 0; // 重置当前运行次数
        _status = "运行中";

        Task.Run(() => {
            try {
                while (!_tokenSource.Token.IsCancellationRequested && _currentRuns < _maxRuns) {
                    _manualReset.WaitOne();
                    Thread.Sleep(200);
                    _message = $"线程{Environment.CurrentManagedThreadId}正在运行第{++_currentRuns}次{Environment.NewLine}";
                    InvokeAsync(() => { StateHasChanged(); });
                }
            } catch (Exception ex) {
                _message = $"发生错误: {ex.Message}";
            } finally {
                CancelSuccess();
            }
        }, _tokenSource.Token);
    }

    private void Pause() {
        _manualReset?.Reset();
        _status = "已暂停";
    }

    private void Continue() {
        _manualReset?.Set();
        _status = "运行中";
    }

    private void Stop() {
        _tokenSource?.Cancel();
        _status = "已停止";
        StateHasChanged();
    }

    private void Timing() {
        if (_milliseconds < 0) {
            _message = "请输入有效的时间（非负数）";
            return;
        }
        _tokenSource?.CancelAfter(_milliseconds);
    }

    private void CancelSuccess() {
        _tokenSource = null;
        _manualReset = null;
        _status = "未开始";
        _message = "线程取消成功！";
    }
}

4. 代码解析

• 状态管理：我们使用 _status 字段来跟踪线程的当前状态，并在 UI 中显示。用户可以清楚地看到线程是运行中、已暂停还是已停止。
• 异常处理：在 Task.Run 中添加了 try-catch 块，以捕获并处理可能出现的异常，确保应用的稳定性。
• 用户输入验证：在 Timing 方法中，我们检查用户输入的时间是否为负数，并给出相应的提示，确保输入的有效性。
• 最大运行次数：通过 _maxRuns 和 _currentRuns 字段限制线程的最大运行次数，避免线程无限运行。

5. 样式设计

为了使用户界面更加美观，我们可以使用简单的 CSS 样式来美化按钮和输入框。以下是样式示例：

Task.razor.css

.main {
    padding: 20px;
    background: gray;
}
button {
    display: inline-block;
    margin: 0;
    padding: 0 20px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    background: rgba(68, 68, 68, 0.5);
    cursor: pointer;
}
input {
    height: 40px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    text-indent: 1em;
    background: #444;
    outline: none;
}

6. 总结

通过以上实现，我们成功地在 Blazor 中创建了一个简单的线程控制组件，允许用户对后台任务进行灵活的管理。无论是开始、暂停、继续还是定时取消，这些功能都为用户提供了更好的控制体验。随着对 Blazor 的深入了解，我们可以进一步扩展这个组件，添加更多功能，如任务进度条、历史记录等，来提升应用的用户体验。

希望这篇文章能帮助您更好地理解 Blazor 中的异步编程和线程控制。如果文章对您有帮助，欢迎点赞、收藏，如果您有任何问题或建议，欢迎在评论区留言！