disable <a> tag for a period of time

Question

To simplify my problem, I made a jsfiddle

When I click on "Click me" it displays a box, but when i click on it twice at the same time, it displays two boxes at the same time, and for my case it should not be possible. The second box should be able to be displayed only if the first box is completly displayed and the user click again on 'Click me'.

How can I achieve that ?

$('#clickme').click(function() {
  $div = $('<div>', {
    "class": "newDiv"
  });

  $('#container').append($div);
  $div.show('clip', 3000);
});

#clickme {
  cursor: pointer
}

.newDiv {
  height: 40px;
  width: 40px;
  background-color: red;
  margin: 5px;
  display: none;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<a id="clickme">Click me</a>
<div id="container"></div>

Answer 1

A simple solution is to use a flag, to check the state whether action can be performed.

Here complete callback of .show() is used to reset the flag once effect is complete.

var disable = false;
$('#clickme').click(function() {
  var elem = $(this);
  if (disable == false) {
    disable = !disable;
    elem.toggleClass('none', disable);
    $div = $('<div>', {
      "class": "newDiv"
    });

    $('#container').append($div);
    $div.show('clip', 3000, function() {
      disable = !disable;
      elem.toggleClass('none', disable);
    });
  }
});

#clickme {
  cursor: pointer
}

#clickme.none {
  cursor: none
}

.newDiv {
  height: 40px;
  width: 40px;
  background-color: red;
  margin: 5px;
  display: none;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<a id="clickme">Click me</a>
<div id="container"></div>