Javascript 交互式加载屏幕（根据用户输入或经过的时间进行更新）

我有一个简单的Angular应用程序，允许用户在终端上进行一些繁重的计算（不能在服务器上）。我目前正在使用定制的ngx微调器在计算期间显示加载屏幕。我想知道（如果可能的话）如何使加载屏幕具有交互性，这意味着：在执行计算时，可以响应用户输入或随着时间的推移更改显示（例如文本或图像）

你可以把它想象成一个迷你游戏，用户可以在加载时玩，一个倒计时，甚至是一个显示当前时间的时钟。他们中的任何一个都会很棒

流程如下所示：

（1） 用户发出计算命令

（2） 显示加载屏幕，然后开始计算

• 用户应该能够在加载屏幕上点击一些效果，和/或在等待结果的过程中随着时间的推移看到变化

（3） 计算完成后，显示结果并隐藏加载屏幕

到目前为止，我已经尝试设置一个计时器（使用rxjs或setInterval）来定期更新它或用事件处理程序绑定HTML元素，但它们只在没有同步运行的情况下工作（如果我只是显示加载屏幕而不进行任何计算）。我知道这可能与UI线程（？）被计算占用这一事实有关，但我不知道如何绕过这一点（或使用任何其他线程）。这是单页应用程序的限制，还是通常不可能？（如果是的话，有没有办法伪造它，让它看起来像我描述的那样？而不仅仅是使用加载gif。）

第一次编辑： 我刚刚发现了一个类似的（更简单？）问题：但可能有点有限。我仍然想知道是否有一个通用的解决方案，无需拆分每个长流程来指示进度，而只需根据计时器（或用户交互）简单地更新微调器

---

免责声明：我对Angular和现实世界的应用程序都是相当陌生的。对于任何语言误用或愚蠢想法的出现表示歉意。

如果部分问题是网页在等待计算完成时被“冻结”或“暂停”，则您可以在web worker中执行计算本身：

您可以执行以下操作：

创建一个web worker文件，并在其中放入一些逻辑来执行计算

为“onCalculationReceived”和“onCalculationComplete”添加事件。web工作者将侦听第一个事件，执行计算，并分派第二个事件

在调用计算的地方，调度第一个事件并等待第二个事件

---

这样，在执行昂贵的计算时，让用户与UI交互应该不会有任何问题。

感谢您的及时回答，我明天将尝试一下。Wit完全符合我的要求！我在将接口和函数导入到web worker文件时遇到了一些问题，但我通过将这些接口和函数从组件中提取到单独的文件中解决了问题，编译器不再抱怨（这里包括了以防任何人遇到它）。