5

HTML にいくつかの要素を追加するために 10 秒間実行されるメソッドの間、アニメーション GIF はまったく動かず、Web ページが動かなくなったように感じます。これを回避する方法。

コード例:

    $('#button).クリック(関数() {   
        showAnimatedGif();
        longRunningMethod();    
        hideAnimatedGif();
    });

これを回避する 1 つの方法は、実行時間の長いメソッドを複数のステップに分割し、この方法でアニメーション化することですが、実行時間の長いメソッドごとにこの方法でコードを記述する必要があります。

これを行う他の方法があるかどうか疑問に思っていますか?

4

2 に答える 2

6

アニメーションが実際に発生することを確認する唯一の方法はlongRunningMethod、ブラウザに定期的に譲歩することです。UI レンダリング スレッドが JavaScript スレッドでブロックされることは珍しくありません。そのため、DOM に加えた変更は、次に JavaScript スレッドが解放されるまで表示されません。setTimeoutのタイムアウトで呼び出すこと0で譲歩できます (ほとんどのブラウザーの実装では、明らかに 0 ミリ秒よりも長くなります。多くの場合、その値は少なくとも 4 ミリ秒、場合によっては 10 ミリ秒に制限されます)。

例: これは 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);
    }
  });

});​

ライブ例※スピナーグラフィックを使用した例

ご覧のとおり、決して譲歩しないため、ボタンをクリックするとページが一瞬フリーズし、その後 500 個の div すべてとメッセージが表示されます。

すべての 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);
    }
  });

});​

ライブ例※スピナーグラフィックを使用した例

それが譲歩するので、進行中の作業を見ることができます。

2 番目のスクリプトは、同じ結果を得るのに、リアルタイムで時間がかかることに気付くかもしれません。これは、ブラウザーが表示を更新するのと同様に、生成に時間がかかるためです。実際には、最初の例と 2 番目の例の間のバランスを見つける必要があります。これは、進行状況を示すのに十分な頻度で生成されますが、プロセスが完了するまでに不必要に長い時間がかかるほど頻繁ではありません。

于 2010-12-14T22:58:55.920 に答える
0

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

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

これにより、回転するグラフィックが回転できるようになります。

于 2015-10-28T16:13:40.417 に答える