交互式加載屏幕（根據用戶輸入或經過的時間更新）

Question

我有一個簡單的 Angular 應用程序，它允許用戶在他們的端進行一些繁重的計算（不能在服務器上）。 我目前正在使用定制的 ngx-spinner 在計算過程中顯示加載屏幕。 我想知道（如果可能的話）如何使加載屏幕具有交互性，這意味着：可以響應用戶輸入或可以在執行計算時隨着時間的推移更改顯示（例如文本或圖像）。

你可以把它想象成一個用戶可以在加載時玩的小游戲、一個倒數計時器，甚至只是一個顯示當前時間的時鍾。 他們中的任何一個都會很棒。

流程如下所示：

(1) 用戶發出計算命令

(2) 顯示加載屏幕，然后開始計算

• 用戶應該能夠在加載屏幕上單擊某些效果，和/或在等待結果時看到隨着時間的推移而發生的變化

(3) 計算完成，顯示結果並隱藏加載畫面

到目前為止，我已經嘗試設置一個計時器（使用 rxjs 或 setInterval）定期更新它或將 HTML 元素與事件處理程序綁定，但它們僅在沒有同步運行的情況下工作（如果我只是顯示加載屏幕而不做任何事情計算）。 我知道這可能與 UI 線程（？）被計算占用的事實有關，但我不知道有什么方法可以繞過它（或使用任何其他線程）。 這是單頁應用程序的限制，還是一般來說不可能？ （如果是的話，有什么方法可以偽造它並讓它看起來像我描述的那樣？而不僅僅是使用加載 gif。）

第一次編輯：我剛剛發現了一個類似的（更簡單的？）問題： 更新網頁以顯示進度，而 javascript 正在循環運行，但可能有點受限。 我仍然想知道是否有一個通用的解決方案，而不需要拆分每個長流程來指示進度，而只需根據計時器（或用戶交互）更新微調器。

免責聲明：我對 Angular 以及現實世界的應用程序相當陌生。 對任何濫用語言或任何愚蠢想法的存在表示歉意。

Answer 1

如果部分問題是 web 頁面在等待計算完成時被“凍結”或“停止”，您可能會在 web 工作人員中執行計算本身： Z5E056C500A1C48BADE51 .org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

您可以執行以下操作：

1. 創建一個 web 工作文件並在其中放置一些邏輯來執行計算。
2. 為“onCalculationReceived”和“onCalculationComplete”添加事件。 web worker 將監聽第一個事件，執行計算，並調度第二個事件。
3. 在調用計算的地方，調度第一個事件並等待第二個事件。

這樣，在執行昂貴的計算時讓用戶與 UI 交互應該沒有問題。