如何确保.click（）事件中的代码在再次运行之前已经完成

Question

我有一个.click（），可以使用动画运行各种功能。这些动画取决于元素的当前位置，因此如果在上一个动画运行之前第二次单击该按钮，它将稍微关闭。

假设我的代码写得像：

$('.button').click(function() {

    if (condition A)
       ExecuteAnimation1;
    else if (condition B)
       ExecuteAnimation2;

});

如何在调用之前确保动画功能已完成？我会使用.queue（）方法吗？

感谢。

Answer 1

试试此代码

var IS_BUSY_ANIMATING = false;

function start_animation() {
  if (IS_BUSY_ANIMATING) {
    setTimeout(startAnimation, 2000); //TRY after 2 seconds
  }

  IS_BUSY_ANIMATING = true;

  if (condition A)
    ExecuteAnimation1;
  else if (condition B)
    ExecuteAnimation2;

  IS_BUSY_ANIMATING = false;
} 

$('.button').click(start_animation);

Answer 2

我会像这样修改@blunderboy：

$(document).ready(function(){
   var animation_disabled = false;
   $('.button').click(function() {
    if(!animation_disabled){
       animation_disabled = true;
       if (condition A)
          ExecuteAnimation1;
       else if (condition B)
          ExecuteAnimation2;
       animation_disabled = false;
     }
   });
});