jquery - HTML5 キャンバス描画がアニメーションをブロックして正しく実行されない

Question

HTML5キャンバスにプロットしている巨大なデータセットがあるので、プロットには約3秒かかります。そのため、この 3 秒間で読み込みバーを表示して、ユーザーに処理が行われていることを伝える必要があります。基本的に、今回は、アプリの使用中にキャッシュとして使用されるオフスクリーン キャンバスに描画しています。これが発生している間にローディングバーを更新したいのですが、何らかの理由でjqueryは、描画が完了するまでローディングバーのサイズを変更する呼び出しを無視しています. 100%にジャンプ

だからここに私がやろうとしていることの要点があります...

function drawStuff() {
    for(p in points) {
        points[p].draw();
        updateLoadingBar(p/points.length);
    }

}


function updateLoadingBar(percent) {
    $('#loading_bar').width(percent+'%');
}

このコードは少し単純化されています。いいえ、実際にはループ内で DOM 要素を取得しているわけではありませんが、これはより簡潔で同じ結果になります。重要なことは、ブラウザ全体がロックして何も起こらないことです。他の言語では、これを行うためにワーカー スレッドを起動するだけですが、ここではオプションではないため、多くの作業を行いながらレスポンシブ UI を維持するための最善の方法は何かと考えています。

ありがとう。