アニメーションの進行中に複数のクリックを防止する（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

あなたのコードは実績がありましたが、アニメーションのチェックを行う前にクラスを追加していました。

私は単にあなたのアニメーションのチェックを移動し、クリックがクラスを変更することさえできないようにしました。

// 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/