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 つでも解決できますように
閲覧ありがとうございました。