0

このソリューションを自分のニーズに合わせようとしています: jQueryを使用して「お待ちください、読み込み中...」アニメーションを作成するにはどうすればよいですか?

基本的に、素晴らしいロード GUI で Ajax リクエストをラップするための非常に優れたスキームが提供されています。私が持っている関数に対して同じことをしようとしています。これは、いくつかの計算を行い、DOM にいくつかのグラフィックを追加します。

だから私が試したのはこれです：

$("body").addClass("loading");
long_time_taking_function(mainDiv);
$("body").removeClass("loading");

残念ながら、 long_time_taking_function() が実行される前または後に、クラスが追加されてすぐに削除されたように見えます。ただし、removeClass() 呼び出しをコメントアウトすると、gif がページ上に浮かんだままになるため、クラスの追加が機能することはわかっています。

これを機能させる方法はありますか？必要に応じて、中間関数の詳細を提供できます。

乾杯

4

3 に答える 3

3

これは AJAX でよくある落とし穴です。最初の「A」は「非同期」を表します。つまり、AJAX 呼び出しはすぐに返され、多かれ少なかれ「バックグラウンドで」実行されます。 long_time_taking_function()AJAX 呼び出しが含まれています。$('body').removeClass('loading')それを AJAX 呼び出しのコールバックに移動するだけです。jQuery を使用している場合 ( にタグを付けた場合)、次のようになります。

$.ajax({
    ...options...
}).always(function(response) {
    $('body').removeClass('loading');
});

always()編集: ajax 呼び出しが失敗した場合でも、ロード クラスを削除する必要があるため、ここでの jQuery Deferred オブジェクトのコールバックは である必要があります。

于 2012-07-30T23:31:37.817 に答える
1

関数にコールバックを追加して、終了時に removeClass ステートメントを呼び出すことができます。

このようなもの：

     //declare your functions
     function long_time_taking_function(mainDiv, callback){

        //...your code...
        callback();
     }

     function removeLoadGif(){
         $("body").removeClass("loading");
     }



     //in your current code call this
     $("body").addClass("loading");
     long_time_taking_function(mainDiv, removeLoadGif);

$("body").removeClass("loading");または、関数 long_time_taking_function の最後に行を追加することもできます。本体に現在クラスがない場合、何もしません。

于 2012-07-31T00:20:25.557 に答える
0

あなたはこのようなことをする必要があります...

$("body").addClass("loading");
doSomething(url,params)
  .complete(function() {
    $("body").removeClass("loading");
  });

あなたのコードでは、addClass と removeClass が非常に高速に実行され、まるで何も起こらなかったかのようです。

于 2012-07-30T23:32:29.613 に答える