javascript - 実行時間の長い関数で jQuery で変更された DOM の即時更新を強制する

Question

実行に約 2 秒かかる JavaScript があります (複雑な最適化アルゴリズム)。関数の先頭で特定のスパンを「作業中...」に設定したい。関数の最後までスパンが変わらないことがわかります。

DOM 変更の伝播を強制するにはどうすればよいですか? または、これを別の方法で一緒にアプローチする必要がありますか？

ボタンの onclick から関数を呼び出します。

関数は次のようなものです。

function optimize() {
    $('#status').text('working...');
    // calculate for 2 seconds
    $('#status').text('done!');
}

Answer 1

実行時間の長いコードを setTimeout 呼び出しでラップしてみてください。

function optimize() {
    $('#status').text('working...');
    window.setTimeout(function() {
        // calculate for 2 seconds
        $('#status').text('done!');
    }, 0);
}

これにより、実行時間の長いコードの新しいコール スタックが強制的に作成され、新しいコール スタックが実行を開始する前に再描画 (テキストの変更) が完了します。