禁用<a>标签一段时间

Question

为了简化我的问题，我创建了一个 jsfiddle。

当我点击“Click me”时，它会显示一个框，但是当我同时点击两次时，它会同时显示两个框，而在我的情况下，这不应该是可能的。只有在第一个框完全显示并且用户再次点击“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>

- Mehdi Souregi

Answer 1

一个简单的解决方法是使用标志来检查状态，以确定是否可以执行操作。

在这里，.show()的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>

- Satpal

---

啊，你比我快！ :D - Huelfe

在您无法单击时添加光标：默认，那就完美了 :) - Alvaro Menéndez

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);

这里有一个可用的代码示例，你可以在这个链接中查看。

- James Hill

---

我会选择@Satpal的解决方案，因为它对于我的情况来说很容易实现，但我认为你的解决方案应该是最干净和正确的解决方案。 - Mehdi Souregi

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);
});

- Himanshu Upadhyay

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;});
});

- Adder

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;
  });
}
});

fiddle

请返回已翻译的文本。

- Luke

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();
}

- Tomás Amaro