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