Display animation complete once even though many animations are fired-CodePudding

I created some code where every time the user clicks the "Go" button the animation starts, and once the animation completes the code prints "Finished". I want to make it so that, if the user clicks "Go" multiple times before the previous animation ends, don't print "Finished" for the previous animation but only print it for this one.

How can I do this? Here's the code I have so far.

$("button").on("click", function() {
  $("p").append("Started...");

  $("div").each(function(i) {
    $(this).fadeIn().fadeOut(1000 * (i   1));
  });

  $("div").promise().done(function() {
    $("p").append(" Finished! ");
  });
});

div {
  height: 50px;
  width: 50px;
  float: left;
  margin-right: 10px;
  display: none;
  background-color: #090;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

CodePudding user response：

Set a flag when clicked, and if the flag shows that the animation is ongoing, do not proceed. Reset it once Finished.

let inProgress = false;
$("button").on("click", function() {
  if (inProgress) return;
  inProgress = true;
  $("p").append("Started...");

  $("div").each(function(i) {
    $(this).fadeIn().fadeOut(1000 * (i   1));
  });

  $("div").promise().done(function() {
    $("p").append(" Finished! ");
    inProgress = false;
  });
});

div {
  height: 50px;
  width: 50px;
  float: left;
  margin-right: 10px;
  display: none;
  background-color: #090;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

If you want to allow multiple clicks, do the same sort of thing, but set a counter when clicked, and do a recursive call if the counter is above 0 at the end.

let toGo = 0;
let inProgress = false;
$("button").on("click", function() {
  toGo  ;
  if (!inProgress) animate();
});
const animate = () => {
  toGo--;
  if (!inProgress) $("p").append("Started...");
  inProgress = true;

  $("div").each(function(i) {
    $(this).fadeIn().fadeOut(1000 * (i   1));
  });

  $("div").promise().done(function() {
    if (toGo === 0) { $("p").append(" Finished! "); inProgress = false; }
    else animate();
  });
};

div {
  height: 50px;
  width: 50px;
  float: left;
  margin-right: 10px;
  display: none;
  background-color: #090;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

CodePudding user response：

Add the totalClick, increase the totalClick for each click, then check if there's no more totalClick left, display 'finished!'

let totalClick = 0;

$('button').on('click', function () {
  $('p').append('Started...');

  totalClick  ;

  $('div').each(function (i) {
    $(this)
      .fadeIn()
      .fadeOut(1000 * (i   1));
  });

  $('div')
    .promise()
    .done(function () {
      totalClick--;
      if (!totalClick) {
        $('p').append(' Finished! ');
      }
    });
});

div {
  height: 50px;
  width: 50px;
  float: left;
  margin-right: 10px;
  display: none;
  background-color: #090;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>