[JavaScript] 避免进度条不移动的现象（仅在一系列过程完成后才移动）

当你在 HTML 中创建一个需要长时间处理的 JavaScript 脚本时，你是否曾遇到过这样的问题：实现了一个进度条，但进度条只在整个过程完成后才移动？

在本文中，我想介绍一个暂时解决这种情况的示例。

按照以下步骤操作，进度条将在处理过程中正常工作。

---

步骤 1：将整个过程放在一个异步方法中

首先，将整个过程放在一个异步方法中并执行。

async function MyFunction(ctx, canvas) {
​
}
MyFunction(ctx, canvas); // 确保在原位置执行它。

---

步骤 2：在更改进度条的值后编写一个 sleep 方法

接下来，在更改进度条的值后编写以下代码。

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
await sleep(0);

这样会在处理过程中使进度条发生变化。

---

我们介绍了一个使进度条正常运行的临时解决方案示例。

希望这篇文章能帮助你解决至少一个难题。