Trigger second click function only when first click function is finish

Question

here is my situation,

I'm triggering some functions on click like this:

on first click, trigger function A. On second click, trigger function B, On third click, trigger function C, etc etc

All the click are on the same div ( body).

However, I would like the second click to trigger only one the first function is finish. ( all the functions are some animations)

Then the thrid click, to trigger only when the second function is finish, etc, etc.

I'm using the code below to have multi click:

var clickCounter = 0;

$("#body").click(function() {
  clickCounter++;
  switch (clickCounter) {

    case 1:
      showpanel();

      setTimeout(function() {


        hidepanel();
      }, 1820);

      setTimeout(function() {
        movetotop();
      }, 1820);

      setTimeout(function() {
        movetotopheight();
      }, 1820);

      setTimeout(function() {
        nav();
      }, 1820);

      break;

    case 2:

      centralbutton();

      break;

    case 3:
      footerarea();
      break;

    case 4:
      side();
      break;
  }
});

Any pointers / help to achieve this will be really fantastic !!

Thanks so much

Answer 1

You can do something like this by updating the counter in the functions when the function is done, while running set counter to 0 so no action will be triggered.

<div id="body">
  <h1>Demo</h1>
</div>


var clickCounter = 1;

function showpanel() {
            //Set counter 0 so no action is started
            clickCounter = 0;

            //Do animation and stuff and after set counter to the right step.     
      setTimeout(function(){ 
        clickCounter = 2;
      }, 5000);     
}

function centralbutton() {
    //After 5 seconds this function can be used
    alert('STEP 2');
}

$("#body").click(function() {
    console.log('test');
    switch (clickCounter){
  case 1:
    showpanel();
    break;
    case 2:
        centralbutton();
  break;
  case 3:
        footerarea();
  break;
  case 4:
        side();
  break;
  }  
});

https://jsfiddle.net/3u177cs3/

Answer 2

In each function you could attach a specific CSS class to the div, e.g. named by the last function executed. For example at the end of function A append the class "aFinished". Then when performing a click check for the existing classes on the div and by that pick the right function to be executed.

This way you would not even need a clickcounter variable.

var clickCounter = 1;

function showpanel() {
  console.log("pan")
  //Set counter 0 so no action is started
  clickCounter = 0;
      
  //Do animation and stuff and after set counter to the right step.     
  setTimeout(function(){ 
    clickCounter = 2;
  }, 5000);
      
  $("#body").addClass("aFinished")
}

function centralbutton() {
  console.log("cen")
  //After 5 seconds this function can be used
  alert('STEP 2');
   
  $("#body").removeClass("aFinished")
  $("#body").addClass("bFinished")
}

$("#body").click(function() {
  console.log('click');
  if ($("#body").hasClass("aFinished")) {
    centralbutton();
  }
  else if ($("#body").hasClass("bFinished")) {
   footerarea();
  }
  else if ($("#body").hasClass("cFinished")) {
    side();
  }
  else {
    showpanel();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
  <h1>Demo</h1>
</div>