1

完了するまでに時間がかかる可能性のある JS ルーチン (ユーザーによってトリガーされる) があります。ルーチンの実行中に、進行状況オーバーレイを画面に表示したいと考えています。ルーチンを呼び出すコードは次のとおりです (クリック イベントに応答して呼び出されます)。

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
}

クラス トグルは、opacityおよびvisibility(トランジションでアニメーション化された) の変更をトリガーします。

クラスの変更自体は正常に機能しています。1 つ目は低速ルーチンの前に実行され、2 つ目は他のすべての後に実行されます。

問題は、終了後まで外観が#progressOverlay変わらないことmyBigRoutine()です。
その結果、プログレス オーバーレイが画面上で一瞬点滅し、すぐに再び非表示になります (すべてアニメーションなし)。

大きな JavaScript ルーチンの前に (または、それと並行して) 視覚的な更新/再描画を強制する方法はありますか?

4

2 に答える 2

1

イベントをアニメーションの終了にバインドできます。したがって、アニメーションが終了すると、コードが実行されます。

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');

}

$("div#progressOverlay").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
});

私は願っています、これがあなたが必要とするものです:)

于 2012-05-26T06:30:13.517 に答える
1

関数myBigRoutine()は非同期で呼び出す必要があります。

function handleClick() {
  $('div#progressOverlay').removeClass('hidden');
  setTimeout(function() {
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
  }, 150);
}

150 はミリ秒単位のタイムアウト遅延を意味するマジック ナンバーです。任意の小さな数にすることができます。

また、クラスの代わり.hide()に.show()jQuery メソッドを使用することも検討してください。hidden

于 2012-05-26T05:41:58.153 に答える