禁用<a>标签一段时间

Question

为了简化我的问题,我做了一个jsfiddle

当我点击"Click me"时,它会显示一个框,但是当我同时点击它两次时,它会同时显示两个框,对于我的情况,它应该是不可能的.只有在完全显示第一个框并且用户再次单击"单击我"时,才能显示第二个框.

我怎样才能做到这一点？

$('#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

一个简单的解决方案是使用标志来检查状态是否可以执行操作.

这里complete回调.show()用于在效果完成后重置标志.

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>