Question

I have a button, when clicked, animates a div.

I am trying to make use of the $.animate() [complete] callback function, but running into a situation where clicking the button twice really fast causes the animation to run twice before the first animation’s [complete] callback runs.

Please see this link for demo.
http://jsfiddle.net/zs2uf/3/

Any ideas how to prevent the second click from beating the first’s callback?

Answer 1

You should disable the button immediately after it is clicked, and then do the animation.

You say you want to make it so that the button can only be clicked once, but you wait until the animation is done before disabling the button. This is why the program doesn’t behave as you wish it to, since during the animation, the button could be clicked again.

Here is a how to make sure to button can only be clicked once:

$("#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

The unbind() may not be necessary in many browsers, but it ensures that the click event handler is actually removed from #next.