[JavaScript] 画面の再描画を待つ・画面を強制的に再描画する - Qiita

WEB ブラウザ上での JavaScript で時間のかかる計算処理をするとき、直前で DOM の内容を変更してもすぐに画面に反映されないことがあります。 (理由に関しては少しややこしいため、本記事では不説明。) 従来の対処法として setTimeout() で delay を 0 にするというものがありますが、ブラウザや状況によって思い通りに動作しないことがあります。 本記事では他の方法を書きます。 1. 結論: requestAnimationFrame() を 2 回呼ぶ const repaint = async () => { for (let i = 0; i < 2; i++) { await new Promise(resolve => requestAnimationFrame(resolve)); } };