Prevent Multiple Clicks While Animation Is Ongoing (stoppropagation & :animated)

I am asking after reading and following these answers. jQuery prevent multiple clicks until animation is done how to prevent click queue build up, using toggle in jquery? tried

Solution 1:

Your code was solid, however, you were adding the class BEFORE checking for animation.

I simply moved your animation check up, and prevented the click from even changing the class.

// jQuery 1.11.0 on DOM readyvar$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 ');  
                returnfalse;
            }
        $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 ');  
                returnfalse;
            }
        $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/