Block events with jquery

Question

I have been for some time searching the jquery documentation for a function with the following behavior

Suppose we have two buttons on the screen each with a different click event:

<button>Effetc1</button>
<button>Effetc2</button>
<div> Click in first button to change</div>

The first triggers an animation, the second launches an alert. I want the second button event to wait until the completion of the first.

However are two separate events, so can not overlap callbacks, I want that during the execution of the first event, no other event run until the completion of the first. Example below

http://jsfiddle.net/xwky0wc1/3/

Answer 1

Sometimes a simple one fleg can solve your problem.

Example:

$(document).ready(function() {
  var fleg = false;
  $('button:eq(0)').click(function() {
    $('div').html('click in second button during animation');
    $('div').animate({
      width: 300
    }, 5000, function() {
      $('div').animate({
        lineHeight: 100
      }, 5000, function() {
        fleg = true;
      });
    });
    return false;
  });
  $('button:eq(1)').click(function() {
    if (fleg) {
      alert('Shit, stoped animation... Wait to finish idiot jquery');
    }
  });
});

div {
  background: red;
  color: white;
  text-align: center;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button>Effetc1</button>
<button>Effetc2</button>
<div>Click in first button to change</div>

A function that does this in jquery I’ve never seen it, but you can wait for the end of the Animate by putting a function(){} and place the true Fleg so you can press the button.