Handling quick clicks in jQuery

Question

I am creating a website (with jQuery 1.4) that has a basket with a floating point (fixed position).

Current working functionality ( Demo here )

• When the user clicks on the basket, he switches the slides to open / close and switches the class to "locked"
• When the user clicks the "add element" link on the page that opens, adds the "on" class and disappears in the notification that the "element name" has been added

What I'm fighting

• If the user clicked the “add item” link: after 3 seconds the notification should disappear, the basket slide is closed and the “on” class will be deleted. BUT , this must be considered if the user desperately clicks 10 things quickly; updating the added text of the notification about the name of the track, not queuing up a bunch of attenuation / slides, but just staying open beautifully, and then sliding for 3 seconds from the moment the last element was added. And if the basket class is “locked” (that is, it has already been opened by the user), then only the notification should disappear, the basket should remain open.

javascript bye

//Toggle basket directly
$("#basket-button").click(function(){
    $("#basket-contents").slideToggle();
    $("#floating-basket").toggleClass("locked on");
    return false
});
//Toggle basket with a 'buy now' button
$(".buy-button").click(function(){
    //open basket 
    $("#basket-contents").slideDown();
    $("#floating-basket").addClass("on");
    //set track name
    $("#basket-trackname").text($(this).attr('name'));
    //Display basket message
    $("#basket-message").fadeIn();
    return false
});

HTML

<a class="buy-button" name="Item Name one" href="#">Buy</a>
<a class="buy-button" name="Item Name two" href="#">Buy</a>

<div id="floating-basket">
    <div id="basket-message">
        <strong id="basket-trackname"></strong> added to basket!
    </div>
    <a href="/basket" id="basket-button">My Basket <span id="basket-number">0</span></a>
    <div id="basket-contents">
        lorem
        <a href="#">Checkout</a>
    </div>
</div>

http://www.webresourcesdepot.com/ajaxed-sliding-shopping-cart-with-jquery - , - ( ).

:)

Answer 1

setTimeout clearTimeout

var t = setTimeout(function(){ whattodo(); }, 3000);

, whattodo() ( ..).

.stop() :

clearTimeout(t); // clears previous timeout
t = setTimeout(function(){ whattodo(); }, 3000); //set new timeout

setTimeout/clearTimeout 3 , .stop() - @http://api.jquery.com/stop/ - :

$(myelementwithanimation).stop()

: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 2

, .stop()

http://api.jquery.com/stop/

Answer 3

, :

free=true;
function doSomeAnimation(){
//do what is done either way
if(free){
free=false;
$(something).addClass('foo').slideDown(function(){free=true;});
}
}

instead of canceling the animation - just don't run them if they are already running

PS. The timeouts are fine, but you have to hold all the handlers so that they can clear the timeout, so it gets ugly ...;)