JavaScript 慢 DOM 更新

Question

我目前正在處理一個電子項目，在該項目的一部分中，我想遞歸地在目錄中查找文件，並像 winrar 那樣向用戶顯示每個文件名。

你們都知道 winrar 在我們存檔或取消存檔時是如何工作的，文件名會快速顯示並且進度條會向前顯示。 這與我正在嘗試做的非常相似。 見下圖。

現在的問題是，當電子掃描目錄遞歸時，它會一個一個地查找文件，然后在控制台中打印文件名而不是在 DOM 中。 如果掃描時間過長，這種情況會使用戶認為程序不起作用。 在所有掃描操作完成后，掃描程序結束時向用戶顯示最后一個文件名。

出於這個原因，我編寫了一個示例代碼來在瀏覽器中快速更新 DOM，我遇到了與我在電子項目中遇到的相同問題。 我怎樣才能克服這個問題，我以前從未見過這樣的事情，為什么會發生這種情況，請解釋一下。

示例代碼在這里。 將數字增加到 10000 並嘗試在您的瀏覽器中更好地理解。

 var myBtn = document.getElementById('myBtn'); var myDiv = document.getElementById('myDiv'); myBtn.addEventListener('click', function() { for (var i = 0; i < 1000; i++) { myDiv.innerHTML = i; console.log(i); } });

 #myDiv { border: 1px solid black; padding: 30px; margin-bottom: 10px; } #myBtn { padding: 10px; }

 <div id="myDiv"></div> <button id="myBtn" type="button" name="button">Button</button>

Answer 1

為了了解發生了什么，您需要了解事件循環的工作原理。 因為 JS 是一種單線程語言，各個代碼單元（稱為“任務”）輪流執行，但永遠不能中斷另一個。 這就是為什么您的代碼不起作用的原因。 主線程卡在那個循環上，在它完成之前不能做任何其他事情。

您可以使用window.requestAnimationFrame()為文本設置動畫，但您可能應該顯示當前正在處理的文件，這正是 WinRar 所做的。

 const outDiv = document.getElementById("output"); // The each number is displayed. (lower = faster) const PERIOD = 50; // The limit. const MAX = 100; // The code is written like this so it always runs // at the same speed. Never increment `i` in the // handler! let startTime = performance.now(); function handler(now) { const timeDiff = (now - startTime), i = Math.min(Math.floor(timeDiff / PERIOD), MAX); outDiv.innerText = i; if (i < MAX) { window.requestAnimationFrame(handler); } } handler(startTime);

 <div id="output"></div>