Question

To simplify my problem, I made a jsfiddle

当我点击＆＃34;点击我＆＃34;它显示一个框，但是当我点击它两次同时，它同时显示两个框，对于我的情况，它应该是不可能的。只有当第一个框完整显示并且用户再次点击“点击我”时，才能显示第二个框。

我怎样才能做到这一点？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这里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); }); } });的回调用于在效果完成后重置标记。

＆＃13;

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

＆＃13;

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

＆＃13;

$ export NLS_LANG="ENGLISH_UNITED KINGDOM.US7ASCII"
$ sqlplus ...

SQL> select dump('£', 1017) from dual;

DUMP('??',1017)
-----------------------------------------------------
Typ=96 Len=6 CharacterSet=AL32UTF8: ef,bf,bd,ef,bf,bd

＆＃13;

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

此处a working fiddle。

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

i always use callback after end of animation:

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

Answer 6

If you want a simple solution for your problem you can place an if statement before the assignment of the $div variable:

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


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

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

停用<a> tag for a period of time

6 个答案: