長いJavaScriptメソッド呼び出し中にアニメーション画像が移動しない

Question

10秒間実行されてhtmlに要素を追加するメソッドでは、アニメーションgifがまったく動かず、Webページが固まっていると感じます。これを回避する

コード例：この周り

 
    $('#button).click(function() { 
     showAnimatedGif(); 
     longRunningMethod();  
     hideAnimatedGif(); 
    }); 

一つの方法は、解散に複数のステップで実行時間の長い方法であり、この方法をアニメーション化するが、その後は、各長時間実行されている方法のためにあなたのコードをこのように記述する必要があります。

これを行うための他の方法がある場合はどうすればいいですか？

Answer 1

実際にアニメーションが確実に行われるようにするには、longRunningMethodをブラウザに定期的に送信するしかありません。 JavaScriptスレッドでUIレンダリングスレッドがブロックされることは珍しくありません。そのため、DOMへの変更は、次回のJavaScriptスレッドが生成するまで表示されません。 0（少なくともブラウザの実装では0ms   —より明らかに  —、多くのクランプは4ms以上、おそらくは10ms以上のタイムアウト）でsetTimeoutを呼び出すことによって得られます。

例：ここでは500のdivを追加するスクリプトだが、ブラウザに進行中の作業を表示する機会を与えないか、（通常は）何もアニメーション：

jQuery(function($) { 

    $("#btnGo").click(function() { 
    var n; 

    display("Loading..."); 

    for (n = 0; n < 500; ++n) { 
     $("<div/>").html("Div #" + n).appendTo(document.body); 
    } 

    display("Done loading"); 

    function display(msg) { 
     $("<p/>").html(msg).appendTo(document.body); 
    } 
    }); 

});​ 

Live exampleを* Example with spinner graphic

することができますようにそれが決して収穫することはないので、ボタンをクリックすると、ページが一瞬止まると、すべての500のdivとメッセージが表示されます。収量は、あなたが進行中の作業を見ることができるので

jQuery(function($) { 

    $("#btnGo").click(function() { 
    display("Loading..."); 

    addDivs(0, 500, function() { 
     display("Done loading"); 
    }); 

    function addDivs(current, max, callback) { 
     if (current < max) { 
     $("<div/>").html("Div #" + current).appendTo(document.body); 
     setTimeout(function() { 
      addDivs(current + 1, max, callback); 
     }, 0); 
     } 
     else { 
     callback(); 
     } 
    } 

    function display(msg) { 
     $("<p/>").html(msg).appendTo(document.body); 
    } 
    }); 

});​ 

Live example * Example with spinner graphic

：間のすべてのdivを生成するスペクトルのこの他の端と

コントラスト。

同じ結果を得るために、2番目のスクリプトの方が時間がかかり、実際にはもっと長い時間がかかります。これは、ブラウザがディスプレイを更新するので、歩留まりに時間がかかるためです。実際には、第1の例と第2の例との間のバランスを見つけることが望ましいでしょう。  —多くの場合、進行状況を表示するのに十分なものがありますが、処理が不必要に長時間かかることはありません。

Answer 2

長時間実行しているメソッドが同期ajax呼び出しを行っている場合。 openメソッドで非同期オプションを使用します。

xmlHttp.open('POST', ajaxurl, true); 

これにより、スピンしているグラフィックを回転させることができます。