Handling rapid clicks in jQuery

Question

I'm building a site (with jQuery 1.4) which has a floating (fixed position) basket.

Current working functionality (Demo here):

• When the user clicks the basket itself it toggle slides open/closed and toggles a "locked on" class
• When the user clicks an 'add item' link in the page it slides open, adds an "on" class and fades in a notice saying that "item name" has been added

What I'm struggling with

• If the user clicked an 'add item' link: after 3 seconds the notice should fade out, the basket slide closed, and the "on" class be removed. BUT this needs to take into account if the user frantically clicks 10 things quickly; updating the added track name notice text without queueing up a bunch of fades/slides - rather just staying open nicely and then sliding closed 3 seconds from the last item being added. AND if the basket's class is "locked" (ie; opened by user already) then only the notice should fade out, the basket should remain open.

javascript so far

//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 is the closest thing I found - but even this is problematic (if you add an item and quickly close the basket for example).

Would really appreciate some input :)

Answer 1

I think your looking for .stop()

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

Answer 2

learn about setTimeout and clearTimeout

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

will do anonym function, which basically consists only of whattodo() function (which could hide basket, etc.)

then in each click, .stop() animation and call:

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

so, setTimeout/clearTimeout are to time hiding in 3 seconds, while .stop() stops ongoing animation - learn more @ http://api.jquery.com/stop/ - basic usage:

$(myelementwithanimation).stop()

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

Answer 3

You could have the click handler

$(".buy-button").click(function(){

clear a setTimeout, then call another function with a setTimeout call. Then in this other function do your animation.

Answer 4

This is an idea of what You need:

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

instead of cancelling the animations - just don't trigger them if they're already running

PS. Timeouts are ok, but You have to keep all of them handlers to be able to clear Timeout, so it gets ugly... ;)