如何在執行動畫時一次只允許單擊一個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);