文章/答案/技术大牛

发布

社区首页 >问答首页 >在JavaScript中循环加载进度条

问在JavaScript中循环加载进度条
EN

Stack Overflow用户

提问于 2020-06-19 20:50:19

回答 1查看 476关注 0票数 0

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

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只在一些如此快速的事情结束时更新用户界面，所以我试着替换

    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，但是我对回调的理解不是很好，所以在处理数据之前，我意外地访问了它。

javascript

loops

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-19 21:09:44

在JS中长时间运行循环会冻结UI刷新，为了显示数据的进度，您可能需要将数据处理逻辑移动到worker。您可以在下面的链接中阅读有关网络工作者的信息。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62478363

复制

相似问题

问在JavaScript中循环加载进度条
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中循环加载进度条EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中循环加载进度条
EN