當您在 html 中創建需要長時間處理的 javascript 時，您是否曾經實現過 ProgressBar，並且在整個過程完成後進度條才移動？

在本文中，我想介紹一個針對這種情況的臨時修復範例。

如果您按照以下步驟操作，進度條將在處理過程中運作。

第 1 步：將整個流程放入非同步方法中

首先，將整個流程放在一個非同步方法中並執行。

async function MyFunction(ctx, canvas) {

}

MyFunction(ctx, canvas); // Be sure to run it in the original location.

第2步：更改ProgressBar的Value後寫出睡眠

接下來，在更改ProgressBar的值後編寫以下內容。

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

這將導致進度條在此過程中發生變化。

我們介紹了一個臨時解決方案的範例，以使ProgressBar功能正常。

我希望這篇文章能幫助您至少解決一個難題。

感謝您的閱讀。