html で処理に時間がかかる javascript を組んだ時に
ProgressBar を実装して
一連の処理が全て終了してから
初めて ProgressBar が動いて困った人はいますか？

この記事ではその場合の
応急処置の 1 例を紹介したいと思います。

この工程を踏めば
ProgressBar が処理中に動作してくれます。

手順1 重い処理全体を async なメソッドに配置する

まずは重い処理全体を
async なメソッドに配置して
実行して下さい。

async なメソッドの例

async function MyFunction(ctx, canvas) {

}

MyFunction(ctx, canvas); // 必ず元の場所で実行して下さい。

手順2 ProgressBar の Value を変えた後に sleep 処理を書く

次に ProgressBar の Value を変えた後に
次の処理を記述します。

記述する処理

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

すると ProgressBar が動きます。

以上 ProgressBar を正常に機能させる
応急処置の 1 例を紹介しました。

sleep させることで
処理を一瞬だけ中断させて
無理矢理動作させています。

ただし一瞬中断する関係上
動作は sleep しない時より
少しだけ遅くなります。

あくまでも応急処置である点に
御留意下さい。

何故動作するか、具体的な理由については
コメント欄で簡潔にまとめて頂く事が出来たため
気になる方はそちらをご確認ください。

この記事が皆さんの悪戦苦闘を
1 つでも解決できますように

閲覧ありがとうございました。