0

我目前正在开发一个电子项目，并且在项目的一部分中，我想递归地在目录中查找文件并将每个文件名显示给用户，就像 winrar 所做的那样。

你们都知道 winrar 在我们归档或取消归档某些内容时是如何工作的，文件名会快速显示，并且进度条会向前移动。这与我正在尝试做的非常相似。见下图。

样品1

现在的问题是，当电子扫描目录递归地查找文件时，它会一个一个地找到文件，然后在控制台中打印文件名，而不是在 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>

4

1 回答 1

0

为了了解发生了什么，您需要了解事件循环是如何工作的。因为 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>

于 2021-07-01T18:30:39.573 回答