小编Tuk*_*ler的帖子

Angular:检测昂贵的同步函数内部的变化

我有一个执行昂贵的同步任务的函数。在我的情况下,它是通过 pdfkit 生成的客户端 pdf,但让我们用 while-loop sleep 来模拟它。

我想在运行任务之前显示一个“加载”微调器,并在完成后隐藏它。

如果一切都同步运行,Angular 将没有机会在一切结束之前运行更改检测循环,所以我想我只需要找到一种方法来异步运行它。

我试着把它包装在一个承诺中,所以假设我有:

sleep(ms) {
  return new Promise((resolve, reject) => {
    const expire = (new Date()).getTime() + ms;
    while ((new Date()).getTime() < expire);
    resolve();
  });
}
Run Code Online (Sandbox Code Playgroud)

但是我是否使用 .then() 调用运行它:

run() {
  this.running = true;
  this.sleep(2000).then(() => {
    this.running = false;
  });
}
Run Code Online (Sandbox Code Playgroud)

或使用异步/等待:

async run() {
  this.running = true;
  await this.sleep(2000);
  this.running = false;
}
Run Code Online (Sandbox Code Playgroud)

在函数结束之前不会检测到更改,并且不会显示任何内容。

我想问题是 Javascript 仍然是单线程的,并且 promise 在创建时仍然会立即运行,所以一切基本上仍然是同步运行的。

但即使使用 ChangeDetectorRef.detectChanges() 强制更改检测也无济于事。

到目前为止,我发现的唯一解决方案是在 setTimeout hack 中运行它:

setTimeoutRun() {
  this.running = …
Run Code Online (Sandbox Code Playgroud)

event-loop synchronous promise angular angular-changedetection

5
推荐指数
1
解决办法
1147
查看次数