HTML 5 Progress 元素冻结在活动中
Posted
技术标签:
【中文标题】HTML 5 Progress 元素冻结在活动中【英文标题】：HTML 5 Progress element freezes on activity 【发布时间】：2017-10-30 23:49:36 【问题描述】：我想在我的 javascript 应用程序执行一些初始化时显示一个不确定的进度条，例如使用 fetch api 下载 JSON 对象。不幸的是，任何活动都会冻结 Gnome 3.16.4 上 Firefox 52 64 位的进度条，这可能会导致我的用户在假设应用程序崩溃时重新加载。
作为 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>
如何在活动期间实现解冻进度条？
【问题讨论】：
你可能想要web workers 当浏览器忙碌时它不会重绘，你需要每隔一段时间添加一个小延迟，以便可以重绘进度条，尝试做 10 批 10000，每次之间有一个短暂的超时 @NickA MWE 只是我的真实用例的模拟，它使用的 JavaScript 提取 API 会产生同样的问题。 @OvidiuDolha 谢谢，我会试试 Web Workers！ 【参考方案1】：请试试这个方法：
function print()
return new Promise((resolve,reject)=>
console.log('nop');
resolve(true);
);
async function go()
for(i=0;i<100000;i++)
await print();
go();<progress style="width:100%;height:20px;"></progress>【讨论】：
我的 Firefox 54 应该支持异步/等待，但它仍然显示一些崩溃和奇怪的行为，一旦浏览器支持更好，我会尝试它。 nope 不适用于 chrome 61.... 冻结整个页面，加载所有 nop，然后显示进度条。糟透了；（以上是关于HTML 5 Progress 元素冻结在活动中的主要内容，如果未能解决你的问题，请参考以下文章