Question

这是我的情况，

我在点击时触发了一些功能：

首次点击，触发功能A. 在第二次单击时，触发功能B，在第三次单击时，触发功能C，等等等

所有点击都在同一个div（正文）上。

但是，我想第二次点击只触发一个第一个功能就是完成。（所有功能都是一些动画）

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

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

public class WebGridEditableController : Controller
    {
        // GET: WebGridEditable
        public ActionResult Index()
        {
            List<UserModel> users = UserModel.getUsers();
            return View(users);
        }

        // GET: WebGridEditable
        [HttpPost]
        public ActionResult Index(List<UserModel> oUserModel)
        {
            return View(oUserModel);
        }
    }

    public class UserModel
    {
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public static List<UserModel> getUsers()
        {
            List<UserModel> users = new List<UserModel>()  
            {  
                new UserModel (){ ID=1, FirstName="Anubhav", LastName="Chaudhary" },   
                new UserModel (){ ID=2, FirstName="Mohit", LastName="Singh" },  
                new UserModel (){ ID=3, FirstName="Sonu", LastName="Garg" },  
                new UserModel (){ ID=4, FirstName="Shalini", LastName="Goel" },  
                new UserModel (){ ID=5, FirstName="James", LastName="Bond" },  
            };
            return users;
        }
    }

任何指针/帮助实现这一目标真是太棒了!!

非常感谢

Answer 1

您可以通过在功能完成时更新函数中的计数器，同时将set counter运行为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/

Answer 2

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

这样你甚至不需要clickcounter变量。

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 个答案: