Block events with jquery

Question

Block events with jquery

Navigation

#1 by (1 votes)

1

I've been scouring the jquery documentation for some time looking 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 alert. I want the second button event to wait until the first button is completed.

But they are two separate events, so you can not override callbacks, I want during the execution of the first event, no other event to run until the completion of the first. Example below

link

html jquery css

asked by anonymous 13.11.2015 / 17:44

1 answer

Select item in ListBox with Binding? Include nameSpace Default in XML

score 1 · Accepted Answer

Sometimes a simple 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, but you can wait for the end of the animate by putting a function(){} and put the true fleg to be able to push the button.