Предотвращение множественных щелчков во время анимации (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/