javascript - javascript 在进行冗长的 javascript 计算时显示进度条？

Question

我正在编写一个基于 javascript 的网络应用程序，我必须在其中创建 1000 个记录的数组，生成 0 到 1 之间的随机数作为

for (var i = 0; i < 1000; i++) {
rec[i] = Math.random();
}

生成所有随机数并将其显示在 div 上需要几秒钟，所以我只想问一下如何在生成值时显示进度条？

Answer 1

您是否在做一些愚蠢的事情，例如在循环中向 DOM 写入或附加值 - 从而迫使浏览器尝试在每次迭代时重绘屏幕......

示例 1：小提琴- 4000ms+（对我来说）

for (var i = 0; i < 1000; i++) {
    rec[i] = Math.random();
    document.getElementById('out').innerHTML += ('<br/>'+rec[i]);
}

示例 2：小提琴- 10 毫秒（或大约）

for (var i = 0; i < 1000; i++) {
    rec[i] = Math.random();
}
document.getElementById('out').innerHTML = rec.join('<br/>');

生成 1000 个随机数不应该花费几秒钟。相比之下，我是在一台 8 年前的笔记本电脑上输入的，该笔记本电脑带有蹩脚的迅驰处理器，一个简单的测试在一秒钟内产生了大约 420,000 个随机数。