如何在动画运行时临时禁用JQuery单击处理程序

Question

我对JQuery还比较陌生，我对如何解决以下问题感到困惑。我想暂时禁用两个翻转功能（响应单击事件），直到淡入淡出动画完成。

根据我下面的内容，在动画进行的同时，函数仍然运行，因此两个div（卡片背面和卡片内容）同时显示。

$(document).ready(function(){
  $("#card-back").hide();
  $(".flip-back").hide();
  function firstflip(){
    $(".flip-back").show();
    $(".flip").hide();
    $("#card-content").fadeToggle("fast");
    $("#card-back").delay(300).fadeToggle("fast");
  }
  function secondflip(){
    $(".flip-back").hide();
    $(".flip").show();
    $("#card-back").fadeToggle("fast");
    $("#card-content").delay(300).fadeToggle("fast");
  }
  $(".flip").click(function(){
    $(".flip-back").unbind("click");
    firstflip();
    setTimeout(function(){
      $(".flip-back").bind("click",secondflip);
    },2000);
  });
  $(".flip-back").click(function(){
    $(".flip").unbind("click");
    secondflip();
    setTimeout(function(){
      $(".flip").bind("click",firstflip);
    },2000);
  });
});

感谢在这件事上我能得到的任何帮助！

编辑：为了清晰起见，我现在对淡入淡出分离没有问题，但我需要帮助如何延迟将单击重新绑定到翻转功能（以避免连续多次单击导致动画队列堆积）。

Answer 1

尝试回调，这是一个使函数在执行之前等待另一个函数完成的功能。

代码是这样的：

function firstflip(){
    $(".flip-back").show();
    $(".flip").hide();
    $("#card-content").fadeToggle("fast",function(){
         $("#card-back").delay(300).fadeToggle("fast");
    });
}

Answer 2

在绑定新的事件处理程序（使用setTimeout）之前，您可以向fadeToggle函数传递回调，该函数将在动画完成后执行。这既可以用于显示新的点击目标（我认为它是某种按钮），也可以用于将事件绑定到它

同时，不要为事件处理程序使用匿名函数，然后调用命名的firstFlip和secondFlip，只需将所有逻辑放入命名函数中，并将其作为事件处理程序传递即可。（您在重新绑定时似乎是这样做的，但不是在第一次绑定时。）

请参阅下面编辑过的代码中的注释，了解发生了什么变化：

$(document).ready(function(){
  $("#card-back").hide();
  $(".flip-back").hide();
  function firstflip(){
    // Hide button and remove this click event until next flip completes
    $(".flip").unbind('click').hide();
    $("#card-content").fadeToggle("fast");
    $("#card-back").delay(300).fadeToggle("fast", function(){
       // Once fully displayed, show button and bind next click handler
       $(".flip-back").show().bind("click",secondflip);
    });
  }
  function secondflip(){
    // Hide button and remove this click event until next flip completes
    $(".flip-back").unbind('click').hide();
    $("#card-back").fadeToggle("fast");
    $("#card-content").delay(300).fadeToggle("fast", function(){
       // Once fully displayed, show button and bind next click handler
       $(".flip").show().bind("click",firstflip);
    });
  }
  // Bind initial event (no need to bind secondflip yet, as firstflip will remove it anyway)
  $(".flip").bind("click",firstflip);
});