如何在动画运行时暂时禁用 JQuery 点击处理程序？答案

【问题标题】：How do I disable the JQuery click handler temporarily while an animation is running?如何在动画运行时暂时禁用 JQuery 点击处理程序？
【发布时间】：2013-07-01 00:26:50
【问题描述】：

我对 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);
  });

});

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

编辑：为了清楚起见，我现在可以处理淡入淡出分离，但我需要有关如何延迟单击重新绑定到翻转功能的帮助（以避免动画队列堆叠连续多次点击）。

【问题讨论】：

标签： jquery html event-handling click onclicklistener

【解决方案1】：

试试Callback，这个功能会让一个函数在执行之前等待另一个函数完成。

代码是这样的：

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

}

【讨论】：

在回调中也应该是来自secondflip的$(".flip-back").hide();和$(".flip").show();
哇，那个 w3schools 页面在解释什么是回调方面是一个非常微弱的尝试。我想这在“jQuery 的效果系统允许您定义效果完成时的回调”的狭义上在技术上是正确的。另请参阅w3fools.com
谢谢！这对我来说绝对是新的，并且有助于分离淡入/淡出。但我的问题更多与某人点击非常快有关，导致动画队列堆积。我需要以某种方式取消绑定 secondflip，执行 firstflip，然后在一秒钟后重新绑定 secondflip 以解决此问题。只是不确定如何在语法方面进行。再次感谢！
@IMSoP 我同意你在某些方面的看法。对我来说，w3schools 采用“只要它有效”的原则，大多数需要快速修复而不是完全了解正在发生的事情的人发现这很有帮助（是的，这不是一个理想的情况）。感谢您提供链接上的提示，但他们没有提供解决方案。他们通过启动页面有了想法和努力，遗憾的是他们没有启动更全面的 w3schools 版本。
@Chris'o 好吧，对于 jQuery，显而易见的地方是相当全面的官方 jQuery 文档。如果有人需要对回调的一般介绍（该页面不是），他们会寻找 Javascript（甚至编程概念）教程，而不是特定于 jQuery 的教程。至于 w3fools 的支持者创建更好的文档站点，您没有看到推荐资源的链接吗？

【解决方案2】：

您可以将回调传递给the fadeToggle function，而不是在绑定新事件处理程序之前任意延迟（使用setTimeout），该回调在动画完成后执行。这既可以用于显示新的点击目标（我假设它是某种按钮），也可以将事件绑定到它。

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

请参阅下面编辑代码中的 cmets 了解更改内容：

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

});

【讨论】：