如何在动画执行时一次只允许点击一个 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;
    });
  }
});

这里是一个非常简单、快速组合的 Fiddle 示例：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);

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

How to allow only one JavaScript 'click' method to be clicked at a time while animation is executing?

html

javascript

jquery

click

elements