JavaScript 慢 DOM 更新

Question

I am currently working on an electron project and in a part the project I want to recursively find files in a directory and show each filename to user like how winrar does.

You all know how winrar works while we archive or unarchive something, filenames shown rapidly and a progress bar goes forward. This is very similar to what I am trying to do. See image below.

Now the problem is, while electron scanning directory recursively it finds files one by one, then prints filename in console but not in the DOM. This situation makes user to think program is not working if scanning takes long. At the end of scanning program show the last filename to user after all scanning operation is complete.

For this reason I have wrote a sample code to update DOM rapidly in browser, I got the same issue what I came across in my electron project. How can I overcome this issue, I have never seen anything like that before and why this happens please explain.

Sample code is here. Increase number to 10000 and try in your browser for better understanding.

 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

In order to understand what's going on, you need to understand how the event loop works. Because JS is a single-threaded language, individual units of code (known as "tasks") take turns to execute, but one can never interrupt another. That's why your code doesn't work. The main thread is stuck on that loop and can't do anything else until it's finished.

You can use window.requestAnimationFrame() to animate the text, but you probably should show the file which is currently being processed, which is what WinRar does.

 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>