在 JavaScript 循环期间加载进度条

Question

我有一个处理数据一段时间的循环，所以我想在循环处理时显示一个进度条。我尝试在每次循环迭代中更新进度条：

let data = new Array(1000000); //large input data

let progress_bar = document.getElementById('progress_bar');
let progress_text = document.getElementById('progress_text');
let progress = 0;
let full = data.length;

for (let row of data) {
    progress_bar.style.width = (100 * progress / full) + '%';
    progress_text.innerHTML = Math.round(100 * progress / full) + '%';

    processData(row);

    progress += 1;
}

function processData(input) {
    //process the line of data
}

#progress_track {
    height: 5px;
    width: 80vw;
    margin-left: 10vw;
    background: #888;
}
#progress_bar {
    background: #54f;
    height: 5px;
    width: 0;
}
#progress_text {
    font-size: 18px;
    width: 100vw;
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id='progress_track'>
            <div id='progress_bar'></div>
        </div>
        <div id='progress_text'>0%</div>
    </body>
</html>

如您所见，它在最后一次更新。

Here 它解释说 JavaScript 只在这么快的事情结束时更新 UI，所以我尝试替换

    progress_bar.style.width = (100 * progress / full) + '%';
    progress_text.innerHTML = Math.round(100 * progress / full) + '%';

和

    if ((progress % 1000000) == 0) {
        progress_bar.style.width = (100 * progress / full) + '%';
        progress_text.innerHTML = Math.round(100 * progress / full) + '%';
    }

但这会产生相同的结果。

我也尝试过使用 setTimeouts 和 setIntervals，但我对回调的理解不是很好，所以我最终在处理数据之前不小心访问了数据。

Answer 1

长运行循环在JS中冻结UI刷新，为了显示数据的进度，你可能需要将数据处理逻辑移动到web worker。您可以在以下 link.

阅读有关 Web Worker 的信息

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

在 JavaScript 循环期间加载进度条

Load progress bar during loop in JavaScript

javascript

loops

loading