Disable Link while animated Basket

Question

Hi,

I'm using this script for my online shopping basket: http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/.

Like people suggest in the comments it's easy buggy when you click multiple times on the same image. How can I disable the img link when it's clicked once and re-enable it when the product is added to the basket?

I've tried setting the attribute HREF of to # in the beginning of the function, but that doesn't help.

So when a user clicks the function needs to be executed, but the link should be disabled as long as the function is busy.

thanks in advance for your help.

Answer 1

At the begining of the onclick handler, check for a busy flag. Then set the busy flag to true. Then, in the callback for the ajax method, set the busy flag back to false.

var busy = false;

$('#myLink').click(function(e){
    if(busy) {
        e.preventDefault();
        return;
    }

    busy = true;
    //make ajax call

    $.ajax {..., function(){
        //in ajax callback
        busy = false;
    }}
});