第二次点击第一次动画完成回调函数

Question

我有一个按钮，点击时，动画一个div。

我试图利用$.animate() [完整]回调函数，但遇到两次真正快速点击按钮导致动画在第一个动画的[完成]回调运行之前运行两次的情况。

请参阅此链接进行演示。 http://jsfiddle.net/zs2uf/3/

任何想法如何防止第二次点击击败第一个回调？

Answer 1

您应该在点击按钮后立即禁用按钮，然后执行动画。

你说你想让它只能点击一次，但是你要等到动画完成才能禁用按钮。这就是为什么程序没有按照你所希望的那样工作，因为在动画过程中，按钮可以再次被点击。

这里有一个如何确保按钮只能点击一次：

$("#next").click(function(){ 

    var pos = parseInt($("#box").css("left")), 
     newPos = pos + 100; 

    // disable button immediately after the click 
    // if you wait to disable, you give the user the chance to click twice 
    $("#next").unbind('click'); 
    $("#next").attr("disabled", "disabled"); 

    $("#box").animate({ 
     "left" : newPos //move the box to the right by 100px 
    }, { 
     duration: 150 
    });   
}) 

Working example

的unbind()可能没有必要在很多浏览器，但它可以确保click事件处理程序实际上从#next中删除。

Answer 2

固定它来看看这个

http://jsfiddle.net/zs2uf/5/

代码

$("#next").click(function(){ 


    var pos = parseInt($("#box").css("left")); 
    var newPos = pos + 100; 

    if($("#box:animated").length == 0){ 

     $("#box").animate({ 
      "left" : newPos //move the box to the right by 100px 
     }, { 
      duration: 150, 
      complete: function(){ 

      //after moving the box by 100px, disable the next button, 
      //so that the box can move no further than 100px 
      $("#next").attr("disabled", true); 

      } 
     }); 
    } 





    //problem: 
    //if you click the Next button twice really fast, 
    //the box moves twice before the button is disabled 

})