Question

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

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

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

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

Answer 1

您可以使用旗帜。动画开始时将标记'isAnimating'设置为true，结束时设置为false。任何后续动画只能在此值为false的情况下继续。

您还可以查看:animated selector是否适用于该活动的所有者。并根据你的决定做出决定。

Answer 2

你可以使用bool作为semiphore ..显然，这绝不是安全的，但是javascript并不真正支持锁定，所以你可以通过这种方法容易地遇到死锁和/或竞争条件，但它会起作用99.9％的时间：）

Answer 3

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

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

N.B。此序列化所有具有.button类的元素的切换。 IOW所有按钮只有一个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
    }
  });
 );

Answer 4

好像你会更乐意实现自己的切换。切换实际上仅适用于具有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    
}

Answer 5

你需要一个队列。您可以使用信号量变量构建一个，但jQuery已经提供了一个，所以也许您想要使用它：

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

jQuery通常使用“fx”队列来序列化动画，但你可以将这个“foo”队列用于你想要的任何内容。

队列可以放在任何对象上，因此您可能希望将其放在容器中包含所有.button个对象的容器中。你不能把它放在按钮（这个）上，或者你会回到你现在的位置。

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

阻止javascript函数执行的最佳方法是什么？

5 个答案: