Question

我有一个小的dart脚本，我打算以下列方式使用它：

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
}

即侦听单击按钮并在该单击上执行一些长计算，并从该计算显示画布上的一些中间结果随着计算的进行而生效。

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

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

Answer 1

其中一个解决方案是将长计算的一部分放入dart的event loop中，即通过等待将来立即返回来排队计算。

请参阅sample on DartPad。

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

<强>更新

这几乎是不完全相同的工作函数，在不使用等待的情况下重写，也许它的工作方式会更清晰：

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

在这里，我们实际上创建了200个期货，将它们排入事件循环（Future构造函数执行此操作），并为每个期货注册个人回调。

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

1 个答案: