作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一些复杂的计算需要一段时间才能完成。 (是的,我知道,客户端听起来可能不是执行它们的理想场所,但有充分的理由。)我希望页面随着计算的进行而更新结果。随着计算的进行,我可以让 UI 重新渲染,但不能正确更新结果。
请注意,计算本身并不是异步的,而是将它们包装在 Task.Run
中。似乎没有帮助。这是演示问题的代码的简化版本:
@page "/AsyncTest"
<button type="button" class="btn btn-primary" @onclick="@(e => RunOnClick(e))">Run</button>
<br />
<div>Percent Complete = @PercentComplete %</div>
@code {
private int PercentComplete = 0;
private async Task RunOnClick(MouseEventArgs e) {
for (PercentComplete = 0; PercentComplete < 100; PercentComplete += 20) {
System.Console.WriteLine($"LongCalculation: PercentComplete = {PercentComplete}");
await Task.Run(() => Calculation()); // Does not work.
//await CalculationAsync(); // This works.
StateHasChanged();
}
}
private void Calculation() => System.Threading.Thread.Sleep(500);
private async Task CalculationAsync() => await Task.Delay(500);
protected override void OnAfterRender(bool firstRender) {
System.Console.WriteLine($"OnAfterRender: PercentComplete = {PercentComplete}");
}
}
CalculationAsync()
UI 更新如我所料。
blazor.webassembly.js:1 WASM: LongCalculation: PercentComplete = 0
blazor.webassembly.js:1 WASM: OnAfterRender: PercentComplete = 0
blazor.webassembly.js:1 WASM: LongCalculation: PercentComplete = 20
blazor.webassembly.js:1 WASM: OnAfterRender: PercentComplete = 20
blazor.webassembly.js:1 WASM: LongCalculation: PercentComplete = 40
blazor.webassembly.js:1 WASM: OnAfterRender: PercentComplete = 40
blazor.webassembly.js:1 WASM: LongCalculation: PercentComplete = 60
blazor.webassembly.js:1 WASM: OnAfterRender: PercentComplete = 60
blazor.webassembly.js:1 WASM: LongCalculation: PercentComplete = 80
blazor.webassembly.js:1 WASM: OnAfterRender: PercentComplete = 80
blazor.webassembly.js:1 WASM: OnAfterRender: PercentComplete = 100
最佳答案
在 Task.Run() 中包装同步版本将在 Blazor/Server 中工作,但在 Blazor/Wasm 中无效。 WebAssembly 在单线程上运行,这仍然是浏览器/Wasm 的限制。
当 Blazor 在 Wasm 2 上运行并获得真正的线程时,这可能会在 future 得到解决。我不知道那个截止日期。
同时,使用额外的 Task.Delay() 使循环至少有点异步:
for (PercentComplete = 0; PercentComplete < 100; PercentComplete += 20)
{
System.Console.WriteLine($"LongCalculation: PercentComplete = {PercentComplete}");
Calculation(); // Make the steps as small as possible, Task.Run is of no use
StateHasChanged();
await Task.Delay(1); // give the UI some time to catch up
}
关于async-await - Blazor WebAssembly : How to get UI to update during long running, 非异步进程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60584294/
我是一名优秀的程序员,十分优秀!