javascript - 在 jQuery 中处理快速点击

Question

我正在构建一个网站(使用 jQuery 1.4)，它有一个 float (固定位置)的篮子。

当前工作功能( Demo here ):

• 当用户点击篮子本身时，它会切换滑动打开/关闭并切换“锁定”类
• 当用户点击页面中的“添加项目”链接时，它会滑动打开，添加一个“on”类并淡出一条通知，说明已添加“项目名称”

我遇到的问题

• 如果用户点击“添加项目”链接:3 秒后通知应淡出，购物篮 slider 关闭，“on”类被删除。 但是 如果用户疯狂地快速点击 10 个东西，则需要考虑这一点；更新添加的轨道名称通知文本，而无需排队一堆淡入淡出/幻灯片 - 而只是保持打开状态，然后从添加的最后一个项目开始滑动关闭 3 秒。并且如果篮子的类别被“锁定”(即，用户已经打开)，那么只有通知应该淡出，篮子应该保持打开状态。

到目前为止的javascript

//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/