如何在执行动画时一次只允许单击一个JavaScript“ click”方法？

Question

单击一个元素时，一个div从屏幕滑出到中心。 当点击另一个元件时，其他div在中心滑出屏幕和另一div中滑动。

当在初始div有时间滑动到屏幕中心之前单击另一个元素时，就会发生此问题。

$('#about').click(function(){
   /* makes any visible div slide out and slides in the 'about' div */ });

$('#contact').click(function(){
   /* makes any visible div slide out and slides in the 'contact' div */ });

换句话说，当您单击“ about并立即单击“ contact它们都会不一致地滑入。

我已经尝试过“ attrRemove”，“ unbind”，“ off” ...，尽管它们可以禁用点击，但是我无法再次启用它们。

Answer 1

解决此问题的一种方法是使用变量，该变量指示某个操作当前是否有效。 如果您想对事件进行排队（因此，您不必完全忽略点击（如下面的示例所示），那么可以修改代码以将其添加到某种队列中。

var slideInProgress = false;

$('#about').click(function(){
    if (!slideInProgress) {
        slideInProgress = true;
        $("#slider").slideToggle(5000, function(){
        slideInProgress = false;
    });
  }
});

在此示例中，一个非常简单，快速组合在一起的小提琴在这里： https : //jsfiddle.net/t8tcr0rp/

Answer 2

此代码可能会有所帮助。

function aboutFunc() {
  $('#about').off('click');
  $('#contact').off('click');

  //do your stuff

  $('#about').on('click', aboutFunc);
  $('#contact').on('click', contactFunc);
}

function contactFunc() {
  $('#about').off('click');
  $('#contact').off('click');

  //do your stuff

  $('#about').on('click', aboutFunc);
  $('#contact').on('click', contactFunc);
}


$('#about').on('click', aboutFunc);
$('#contact').on('click', contactFunc);