仅在第一次单击功能完成时触发第二次单击功能答案

【问题标题】：Trigger second click function only when first click function is finish仅在第一次单击功能完成时触发第二次单击功能
【发布时间】：2018-07-22 15:37:58
【问题描述】：

这是我的情况，

我在点击时触发了一些功能，如下所示：

在第一次点击时，触发函数 A。第二次点击，触发函数B，第三次点击，触发函数C，等等等等

所有点击都在同一个 div (body) 上。

但是，我希望第二次单击仅触发一个第一个功能完成。（所有功能都是一些动画）

然后第三次点击，仅在第二个功能完成时触发，等等。

我正在使用下面的代码进行多次点击：

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;
  }
});

实现这一目标的任何指示/帮助都将非常棒！！

非常感谢

【问题讨论】：

标签： javascript jquery switch-statement click

【解决方案1】：

在每个函数中，您可以将特定的 CSS 类附加到 div，例如由最后执行的函数命名。例如，在函数 A 的末尾附加类“aFinished”。然后在对 div 上的现有类执行单击检查时，然后选择要执行的正确函数。

这样你甚至不需要点击计数器变量。

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>

【讨论】：

【解决方案2】：

您可以通过在函数完成时更新函数中的计数器来执行此类操作，同时运行将计数器设置为 0，因此不会触发任何操作。

<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/

【讨论】：