Dart：在长时间计算期间更新UI

我有一个小的省道脚本，我打算按以下方式使用：

CanvasElement canvas;
void main() {
  canvas = querySelector('#canvas');
  querySelector('#start-button').onClick.listen((_) => work());
}

void work() {
  var state; // some state of the computation
  for (int i = 0; i < /*big number*/; i++) {
    // do some long computation
    render(state); // display intermediate result visualisation on canvas
  }
}

void render(var state) {
  canvas.context2D.... // draw on canvas based on state
}

CanvasElement画布；
void main（）{
canvas=querySelector（“#canvas”）；
querySelector（“#开始按钮”）.onClick.listen（（#）=>work（）；
}
无效工作（）{
var state；//计算的某些状态
对于（int i=0；i

也就是说，听一听按钮上的点击，然后点击执行一些长时间的计算，然后随着计算的进行，在画布上实时显示一些中间结果

但是，这不起作用-画布仅在整个计算完成后更新一次

---

为什么呢？我应该如何安排我的代码以一种实时、响应的方式工作？

解决方案之一是将您的长时间计算的一部分放入dart中，即通过等待将来它立即返回来排队计算

请看

但是如果你有很多繁重的计算，我认为最好是开始一个新的隔离，并与它沟通它的状态

更新

这里是几乎不完全相同的工作函数，在不使用wait的情况下重写，也许它的工作原理会更清楚一些：

for (int i = 0; i < 200; i++) {
  new Future(()=>compute(i)).then((double result)=>render(i+result*50));
}

for（int i=0；i<200；i++）{
新的未来（（）=>compute（i）），然后（（双结果）=>render（i+result*50））；
}

---

在这里，我们实际上创建了200个未来，将它们排队到事件循环中（未来构造函数会这样做），并为每个事件注册一个个人回调。

请您再解释一下事件循环中计算的概念，也许可以举个小例子？关于隔离，据我所知，这在我的web应用程序中是不可能的。你必须记住，dart中的所有内容都在一个线程中，如果你没有让dart的事件循环继续进行的机会，这就是你所问的情况，它只会累积所有请求，但只有在整个计算完成后才开始运行它们。在我们将部分计算作为单独的事件放入主循环（将来执行）后，我们开始等待（等待），直到dart计算所有累积的事件，包括html重画等。但等待只是语法糖，只是为了让代码更清晰易读。我们可以使用

.then（）

回调重写该代码，这是完全相同的。我看到了解决方案的工作原理，但我不确定原始问题中的方法为什么不起作用。代码每次循环并更新DOM。为什么DOM更新只在循环结束时才可见？请参阅以与给定的解决方案进行比较。