Disable the <a> tag for a specific period of time

Question

To simplify my problem i did jsfiddle

When I click "Click me", it displays a field, but when I click on it twice at the same time, it displays two windows at the same time, and for my case this should not be possible. The second box should only be displayed if the first window is fully displayed and the user clicks “Click me” again.

How can i achieve this?

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

Run code

Answer 1

, - . -.

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 2

- , , .

complete .show() reset, .

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

, , . complete jQuery.show.

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

fiddle

Answer 6

, if $div:

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


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

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