Javascript 在重阻塞计算前后更新DOM

在执行一些包含大量计算的同步操作时，在前后显示某些内容可能是个问题

组件模板：

<div>
  <my-spinner *ngIf="myService.isLoading"></my-spinner>
</div>

执行myFunction实际上不会显示微调器

我修复的一个方法是用setTimeout包装重载函数，如下所示：

myFunction() {
    this.isLoading = true;

    setTimeout(() => {
        this.calculateSomethingSuperHeavyThatTakes5seconds();
        this.isLoading = false;
    });
}

---

它是有效的，但对我来说不是一个干净的解决方案。myFunction（）中的applicationRef.tick（），将myFunction内容包装在此.zone.run（）或ChangeDeetActionRef.detectChanges（）变体中并没有解决此问题。

您可能需要研究使用来单独执行计算，以便不会导致UI冻结。然后，您只需聆听web worker的响应，然后再切换

此选项。isLoading

再次变为false。@不幸的是，这些也是无法在web Workers中执行的google maps计算。由于javascript是单线程的，您将需要执行一些异步操作，类似于setTimeout。。。在第一个示例中，Angular无法读取

isLoading

，因为当

isLoading

为真时，Angular从未有机会运行。您不想（或不能）的原因是什么使用你的第二种解决方案？@JosephDykstra我想知道是否可以用另一种方式来完成，因为我认为setTimeout不是很干净，你可能想研究一下使用它来单独执行计算，这样就不会导致你的UI冻结。然后，您只需聆听web worker的响应，然后再切换

此选项。isLoading

再次变为false。@不幸的是，这些也是无法在web Workers中执行的google maps计算。由于javascript是单线程的，您将需要执行一些异步操作，类似于setTimeout。。。在第一个示例中，Angular无法读取

isLoading

，因为Angular在

isLoading

为真时从未有机会运行。您不想（或不能）使用第二个解决方案的原因是什么？@JosephDykstra我想知道是否可以用不同的方式执行，因为我认为setTimeout不是很干净

myFunction() {
    this.isLoading = true;

    setTimeout(() => {
        this.calculateSomethingSuperHeavyThatTakes5seconds();
        this.isLoading = false;
    });
}