disable and enable click after toggleClass

Question

i'm using a hamburger menu icon which transforms on click.

The animation is being doing via .toggleClass

$(document).ready(function() {
  $('#nav-hamburger-big').click(function() {
    $(this).toggleClass('open');
  });
});

Example: http://jsfiddle.net/ampnuwsd/8/

This icon triggers an basic bootstrap menu. However i've noticed that the animation hangs when you click it if the page is still loading or when you click it a second time really fast. It will still trigger the menu to pop open however the transform just skips which results in a reversed icon ( an X when the menu is closed and a hamburger when the menu is open )

Is there any way to delay to ability to click, for let's say 1,5 seconds, after the first click has been done?

Edit: Scrolling script:

<script>
// script for smooth scrolling to anchor points
$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 901, 'swing', function() {

    });
  });
});
</script>

Kind regards.

Answer 1

You could temporarily disable the button until the transition end with a promise or by not toggling the class when .is(':animated')

Or more simply :

$('#nav-hamburger-big').click(function() {
    $('#menu').is(':hidden') ? $(this).removeClass('open') : $(this).addClass('open');
});

EDIT:

Based on the fiddle:

1. You need to change the button to have the id nav-hamburger-big
2. change your first css line to #nav-hamburger-big div {

Then:

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    //disable the button first
    $('#nav-hamburger-big').prop('disabled',true);
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 901, 'swing', function() {
      //now re-enable
      $('#nav-hamburger-big').prop('disabled',false);
    });
  });
});