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

Question

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

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

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

Answer 1

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

示例 1:fiddle - 4000ms+(对我来说)

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

示例 2:fiddle - 10ms(或大约)

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

生成 1000 个随机数不应花费几秒钟。相比之下，我在一台已经有 8 年历史、配有蹩脚的 Centrino 处理器的笔记本电脑上输入此内容，一个简单的测试在一秒钟内生成了大约 420,000 个随机数。