2

私はjqueryを使用しており、トグルメソッドをWebページの多数のボタンにバインドしています。こんな感じです

$('.button').toggle(function(){
  // first function
}, function(){
  // second function
});

ただし、これらの関数の両方にアニメーションがあります。そのため、ユーザーは最初または 2 番目の関数の実行中にボタンをクリックできます。これにより、HTML 要素の順序が乱れ、ページの最後に移動する可能性があります。基本的にこれらの機能は、最初のクリックで 1 つの要素を最後に移動し、別のクリックで元の場所に戻すためです。

もちろん、ボタンがページ内を移動していると、ボタンをクリックするのは困難です。しかし、それは可能です。

4

5 に答える 5

5

フラグを使用できます。trueアニメーションの開始時にはフラグ「isAnimating」を設定し、終了時には false を設定します。以降のアニメーションは、この値が の場合にのみ続行できますfalse。

:animated セレクターがイベントの所有者に適用されるかどうかを確認することもできます。そして、それに基づいて決定を下します。

于 2009-08-31T20:15:28.697 に答える
3

bool をセミフォアとして使用できます..明らかに、これは決して安全ではありませんが、javascript は実際にはロックをサポートしていないため、このアプローチでは簡単にデッドロックや競合状態が発生する可能性がありますが、99,9 は機能します% 回:)

于 2009-08-31T20:15:55.810 に答える
0

関数の入り口を制御するフラグを保持できるコンテキストで、切り替えるために渡す 2 つの関数を配置する必要があります。

(function() {
  var toggling = false;
  $('.button').toggle(function(){
    if (!toggling) {
      toggling = true;           
      // first function
      toggling = false;
    } else {
      // whatever you want to happen if re-entrance attempted
    }
  }, function(){
    if (!toggling) {
      toggling = true;           
      // second function
      toggling = false;
    } else {
      // whatever you want to happen if re-entrance attempted
    }
  })
 )();

注意これは、クラスを持つ要素のすべてのトグルをシリアル化します。IOWすべてのボタンに対して 1 つのフラグ.buttonしかありません。toggling各ボタンに独自のトグル フラグを設定する場合:-

$('.button').each(function() {
  var toggling = false;
  $(this).toggle(function(){
    if (!toggling) {
      toggling = true;           
      // first function
      toggling = false;
    } else {
      // whatever you want to happen if re-entrance attempted
    }
  }, function(){
    if (!toggling) {
      toggling = true;           
      // second function
      toggling = false;
    } else {
      // whatever you want to happen if re-entrance attempted
    }
  });
 );
于 2009-08-31T21:06:12.870 に答える
0

独自のトグルを実装すると、より満足できるようです。トグルは、追加のロジックが 0 の場合にのみ機能します。

$('.button').click( 
function () {
  if( $(self).is(":animated") {
    return false;
  }
  if($(self).is(".rolledup")) {
     self.apply(roll_window_down);    
  } else {
     self.apply(roll_window_up);    
  }
});



function roll_window_up() {
  $(self).addClass( 'rolledup' );

  // first function    
}

function roll_window_down() {
  $(self).removeClass( 'rolledup' );
  // first function    
}
于 2009-08-31T21:07:55.550 に答える
0

キューが必要です。セマフォ変数を使用して構築することもできますが、jQuery では既に提供されているため、それを使用することをお勧めします。

$('.button').toggle(function() {
  $(document).queue("foo", function() {
    ...
  });
}, function() {
  $(document).queue("foo", function() {
    ...
  });
});

jQuery は通常、「fx」キューを使用してアニメーションをシリアル化しますが、この「foo」キューは必要に応じて使用できます。

キューは任意のオブジェクトに配置できるため、すべてのオブジェクトが含まれるコンテナーに配置することをお勧めします.button。ボタン（これ）自体に付けることはできません。そうしないと、今いる場所に戻ってしまいます。

これが完了したら、あとはアニメーションを中止するだけです。$('.button').stop();これは、「fx」キューを明示的に空にするか、古いアニメーションをすべて停止するために使用できます。

于 2009-08-31T21:21:15.367 に答える