Kon*_*ner 5 html javascript html5 progress-bar
我想在我的JavaScript应用程序执行一些初始化时显示一个不确定的进度条,例如使用fetch api下载JSON对象.不幸的是,任何活动冻结了Gnome 3.16.4上的Firefox 52 64 Bit上的进度条,这可能会导致我的用户重新加载,因为他们认为应用程序崩溃了.
作为MWE,我使用许多console.log调用来模拟初始化,这也导致阻塞进度条:
<html>
<head><meta charset="utf-8"></head>
<body style="width:99%;height:1000px;">
<progress style="width:99%;position:absolute;top:50%;height:20px;"></progress>
<script>
for(i=0;i<100000;i++) {console.log("nop");}
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
如何在活动期间实现未冻结的进度条?
请尝试这样:
function print(){
return new Promise((resolve,reject)=>{
console.log('nop');
resolve(true);
});
}
async function go(){
for(i=0;i<100000;i++) {
await print();
}
}
go();Run Code Online (Sandbox Code Playgroud)
<progress style="width:100%;height:20px;"></progress>Run Code Online (Sandbox Code Playgroud)