After Link's First Click, Make Link Unclickable, Wait For Transition End + 1s, Then Make Link Clickable Again

I have a main menu. The sub-menu opens when the link of any of the PARENT

that have children is clicked. At this point, a class moves-out is added to the main menu and a

Solution 1:

Try setting pointer-events on the li tag and resetting it after 1 second.

$('.subnav-trigger').on('click', function(event) {
  event.preventDefault();
  var $this = $(this);
  $this.parent().css("pointer-events","none");
  if ($('.main-nav').hasClass('moves-out')) {
    $this.hide();
    setTimeout(function(){
        $this.show();
        $this.parent().css("pointer-events","auto");
    }, 1000);
  }
});

Solution 2:

Here's a way using a recursive function that enabled the click handler, disables it on click, enables the transitionend event, adds your class that enables the transition, then re-enables the function. Enabled a 3s transition to slow it down for the example.

var $lis = $('li'),
    clicker = function() {
      $lis.on('click', function() {
        $lis.off('click');
        $(this).on('transitionend', function() {
          clicker();
        }).addClass('color');
      });
    }

clicker();

li {
  transition: background 3s;
}
li.color {
  background: red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="main-nav"><li><ahref="#0">Home</a></li><li><ahref="#0">Blog</a></li><li><ahref="#0">About</a></li><li><ahref="#0">Contact</a></li></ul>

Solution 3:

More like a debounce problem, you might want to take a look at it if you have not used it before, it will help a lot in design you code.

For the following example, I added moves-out to ul for testing, you can check the console.log to see the result. To use in your app don't forgot to remove it (moves-out) from the <ul...>

<ul class="main-nav moves-out">

functiondebounce() {
    if ($('.main-nav').hasClass('moves-out')) {
      console.log("Clicked - click event Disabled..");
      $(this).off('click');
      setTimeout(function() {
          $(".subnav-trigger").on('click', debounce);
          console.log("click event enabled!");
      }.bind(this), 1000);
    }
};

$(".subnav-trigger").on('click', debounce);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><ulclass="main-nav moves-out"><li><ahref="#0">Home</a></li><li><ahref="#0">Blog</a></li><li><ahref="#0">About</a></li><li><ahref="#0">Contact</a></li><li><ahref="#0"class="subnav-trigger"><span>PARENT</span></a><ul><li><ahref="#0">Child 1</a></li><li><ahref="#0">Child 2</a></li><li><ahref="#0">Child 3</a></li>
      And so on...
    </ul></li></ul><!-- .main-nav -->