0

計算とインジケーターを実行するボタンがあります。

<button class="btn" type="button" onclick="$('#busy').show(); calculate();">Ok</button>
<div id="busy" style="display: none;">Calculating...</div>

この場合、ブラウザーが行うことは、calculate() であり、次に div を表示します。calculate() 関数が最初に div を表示してから計算しようとする場合と同じ問題です。

イベントを意図した順序で発生させるにはどうすればよいですか?

編集: css は計算前に変更される可能性がありますが、計算後までレンダリングされません。クリックイベント処理でも試しましたが、同じことです。

http://jsfiddle.net/Z7rAJ/

4

2 に答える 2

2

jQueryは、 css プロパティ.show()の変更を実行する以外に何もしません(以前の状態に対するいくつかの魔法に加えて)。display

ただし、すべてが同期化されたコードで行われます。calculate()ここでメソッドが最初に呼び出されることは事実上不可能です。

calculate()メソッドが大量の同期化されたブロック操作を実行しており、ブラウザが 2 つのコード セグメントをまとめてバッチ処理している可能性が非常に高くなります。ブラウザでは、Javascript コード、CSS レンダリング、および一般的な「UI の再描画とリフロー」が同じキューで処理されるため、同じスレッドで処理されることがあります。ここでは、いわゆる「UI Queue」について話しています。

つまり、calculate()関数を「高速化」し、小さなチャンクに分離する必要があります。最悪の選択肢は、 a を呼び出しての呼び出しを完全に延期することです。後者は当面の問題を解決しますが、その後もブラウザーと UI キューをブロックします。calculate()setTimeout

例: http://jsfiddle.net/5E2bn/1/

すでに述べたように、実際にはそうしたくありません。これは、要点を明確にするための単なる例です。現実世界のどのシナリオでも、設計図に戻って、calculate()ここで何をするのか、それをどのように小さなチャンクに分割できるのかを考える必要があります。

Javascript で長時間実行されるプロセスを切り離す非常に便利な方法の 1 つは、ランナウェイスクリプト タイマーを使用することです。これは基本的に、同期ループを複数の非同期ループにチャンクして、UI キューとブラウザーにコード実行の間に息を吹き込む時間を与えます。

于 2013-06-21T10:43:24.033 に答える
0

coz setTimeout のようなことをするのは良い選択肢ではないかもしれません

$('.btn').click(function() {
    if (calculate()) {
        $('#busy').show();
    }
});

true または false を返すようにしてください: #busy は、calculate() 関数から値が返されたときにのみ表示されます

于 2013-06-21T10:59:16.337 に答える