Angular2 - 繁重的计算 + 加载程序显示/隐藏 - 我的 DOM 与页面上的内容不匹配

Question

我正在Angular 2工作，试图在重型计算之前向加载器展示并将其隐藏。当我显示加载程序时，DOM正在更新，但是视图不重新粉刷。因此，我的装载机永远不会出现。

完整的代码在这里。

这是怎么可能的？

Answer 1

问题

问题是我的浏览器正在从重型计算中冻结。浏览器在我展示加载程序后没有机会重新粉刷，因为当它尝试重新粉刷时，重型计算会阻止堆栈。

---

我们在堆栈上想要什么

1. 装载机揭示
2. 浏览器重新涂漆
3. 重型计算
4. 加载器hide
5. 浏览器重新涂漆

换句话说，我们要确保在重型计算之前(我称此功能为" h"(在堆栈上进行堆栈，以便" H"不会阻止堆栈浏览器试图重新粉刷。

---

我们如何在堆栈上

我通过观看有关异步性/事件循环/任务排队/等的精彩视频来弄清楚解决方案。

解决方案是：

<loader-show>
setTimeout(() => {
   <heavy-computation>
   <loader-hide>
}, 20)

包裹" H"和加载程序隐藏在setTimeout中。这样，加载程序揭示将进入堆栈，然后" H"，加载程序隐藏将进入任务队列，并且只有在堆栈为空时才会将其推到堆栈(即执行((即，之后/em> loader揭示(。

请注意setTimeout中的" 20" MS延迟？视频中的另一个关键要素是

浏览器每16毫秒

重新粉刷一次

这意味着我的setTimeout必须延迟> 16秒，以确保 ，浏览器将在" H"执行之前重新粉刷视图并阻止堆栈。

---

其他提示

• 将重型计算移至后端。
• 使用基于CSS的加载器。

---

参考代码

这是已解决的代码。