0

私はJavascriptが初めてなので、ご容赦ください。

以下のようなコードがあります。ボタンをクリックするたびに、HTML 要素でアニメーションを実行します。問題は、ユーザーが複数回クリックすると、アニメーションがバッファリングされ、一度に大きな遅延で実行されることです。

以下のコードは、アニメーションが完了するまでループを無効にすることで問題を解決する必要がありますが、そうではありません。コードの構造をあまり変更することはできません。多かれ少なかれ、この形式にとどまらなければなりません。

var processing = false;

$("p").click(function() {
  if (processing == false) {
    for (i=0; i<5; i++) {
      if (processing == false)
        processing = true;
      tastor();
    }
    processing = false;
  }
});


function tastor() {
  zubi = parseFloat($('p').css('font-size'));
  $('p').animate({'font-size': zubi+i}, 500);
}
4

2 に答える 2

5

:animated要素がすでにアニメーション化されている場合は、jQuery 疑似セレクターを使用して早期にブレークアウトできます。

$("p").click(function() {
  if ($(this).is(':animated')) return;

  // The rest of your normal code.
});

デモ: http://jsfiddle.net/MgmET/4/

于 2012-09-10T21:24:47.933 に答える
0

"animate" は 0.5 秒続くイベントを開始することがありますが、実際には実行に 0.5 秒かかりません。したがって、クリックごとの各「テイスター」呼び出しは、次のクリックが発生する前に、非常に迅速に実行されます。

これを修正する 1 つの方法は、animate の「完全な」プロパティに依存することです。アニメーションが終了するまで実行されない関数を animate に渡すことができます。例:

var processing = false;
var increment = 1;
function step (count) {
    if (count > 0) {
        tastor(function() { step(count - 1) });
    } else {
        processing = false;
    }
}
$("p").click(function() {
    if (processing == false) {
        processing = true;
        step(5);
    }
});
function tastor(callback) {
    zubi = parseFloat($('p').css('font-size'));
    $('p').animate({'font-size': zubi+increment}, 500, callback);
}

</p>

于 2012-09-10T21:38:48.703 に答える