2

我正在使用 jquery，我正在做的是将切换方法绑定到网页上的许多按钮。它看起来像这样

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

但是，这两个功能都有动画。因此，用户可以在执行第一个或第二个功能时单击该按钮。这会打乱 HTML 元素的顺序，并可能使它们移动到页面的末尾。因为本质上这些函数所做的是在第一次单击时将一个元素移动到末尾，而在另一次单击时将其移回原来的位置。

当然，一旦按钮在页面中移动，就很难单击它。但这是可能的。

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

您需要将您传递的两个函数放置在一个上下文中，您可以在其中持有一个标志来控制函数入口：-

(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
    }
  })
 )();

注意这将序列化具有该类的元素的所有切换。.buttonIOW 所有按钮只有一个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

似乎您会更乐意实现自己的切换。Toggle 仅适用于具有 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对象的容器上。你不能把它放在按钮 (this) 上，否则你会回到现在的位置。

完成此操作后，您真正需要做的就是中止动画。这可以通过明确清空“fx”队列来完成，或者您可以使用$('.button').stop();停止所有旧动画。

于 2009-08-31T21:21:15.367 回答