禁用<a>标记一段时间</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> 

Answer 2

我认为最干净的解决方案是绑定和取消绑定您的点击处理程序。 无需使用标志或超时。

function clickHandler() {
  $div = $('<div>', {
    "class": "newDiv"
  });
  $('#container').append($div);

  // Unbind click handler until animation is completed
  $("#clickme").off("click", clickHandler);

  // Begin animation
  $div.show('clip', 3000, function() {
    // Animation completed. Bind click handler.
    $("#clickme").on("click", clickHandler);
  });
}

// Initial bind of click handler
$("#clickme").on("click", clickHandler);

这是一个工作小提琴 。

Answer 3

您可以在绘制框时禁用该按钮。 像这样：

$('#clickme').click(function() {
   disabling the button for 3000 sec as the box takes 3000 sec to get rendered.
  setTimeout(function(){
    $(this).attr('disabled','disable');
  },3000);
  $(this).removeAttr('disabled');

  $div = $('<div>', {
    "class": "newDiv"
  });

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

Answer 4

因此，如果框仍在动画中，则需要停止执行。 我正在使用jQuery.show方法的complete参数。

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

  $('#container').append($div);
  inAnimation = true;
  $div.show('clip', 3000, function() {inAnimation = false;});
});

Answer 5

我总是在动画结束后使用回调：

let open = true;
$('#clickme').click(function(){
if ( open ) {
    open = false;
  $div = $('<div>',{"class" : "newDiv"});
  $('#container').append($div);
  $div.show('clip',3000, function(){
    open = true;
  });
}
});

小提琴

Answer 6

如果你想要一个简单的问题解决方案，你可以在$ div变量的赋值之前放置一个if语句：

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


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

$('.newDiv').click(function() {
    $('.newDiv').destroy();
}