HTML 5 Progress元素冻结活动

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)

如何在活动期间实现未冻结的进度条?

Beh*_*adi 0

请尝试这样:

  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)