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

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()在许多浏览器中可能不是必需的，但它确保单击事件处理程序实际上从 #next 中删除。