動畫正在進行時阻止多次點擊（stopPropagation＆：animated）

Question

我在閱讀並追蹤這些答案後詢問。

jQuery prevent multiple clicks until animation is done
how to prevent click queue build up, using toggle in jquery? tried using bind/unbind('click')

儘管代替快速點擊氣泡具有e.stopPropagation();和if ($element.is(':animated')){return false;}。

Here是我的小提琴。慢點擊工作正常，快點擊使其失敗。請問我做錯了什麼？如何在菜單項目動畫時放棄所有快速點擊？

Answer 1

您的代碼是穩定的，但是，您正在添加BEFORE類的動畫檢查。

我簡單地移動了你的動畫檢查，並防止點擊甚至改變類。

// jQuery 1.11.0 on DOM ready 

var $hamburgerMenuButton = $('#burgerButton'); 
var $navTitle = $('.navigation-item'); 
var $score = $('.score'); 

$hamburgerMenuButton.click(function(e) { 

e.stopPropagation(); 

    if (!$hamburgerMenuButton.hasClass('open')) {   

     console.log('hamburgerMenuButton does NOT have class open'); 
     if ($navTitle.is(':animated')) { 
     $score.append('<br>animating '); 
       return false; 
      } 
     $hamburgerMenuButton.addClass('open'); 
     console.log('class open ADDED to hamburgerMenuButton'); 
     $score.append('<br>class open ADDED '); 


      var delay = 0; 
      $navTitle.each(function(){ 
       $(this).delay(delay).animate({ 
        'margin-left':'0px' 
       },500,'easeOutQuint'); 
       delay += 33; 
      }); // animation end 

     $score.append('<br>clicked '); 

    } // if end 

    else { 

     console.log('hamburgerMenuButton does HAVE class open'); 
      if ($navTitle.is(':animated')) { 
     $score.append('<br>animating '); 
       return false; 
      } 
     $hamburgerMenuButton.removeClass('open'); 
     console.log('class open REMOVED from hamburgerMenuButton'); 
     $score.append('<br>class open REMOVED '); 



      var delay = 0; 
      $navTitle.each(function(){ 
       $(this).delay(delay).animate({ 
        'margin-left':'10em' 
       },500,'easeOutQuint'); 
       delay += 33; 
      }); // animation end     

     $score.append('<br>clicked again'); 

    } // else end    
}); // $hamburgerMenuButton click end 

https://jsfiddle.net/gregborbonus/b2tw65hf/3/