javascript-处理jQuery中的快速点击

我正在建立一个带有浮动(固定位置)购物篮的网站(使用jQuery 1.4).

>当用户单击购物篮本身时,其切换滑动打开/关闭并切换“锁定”类
>当用户单击页面上的“添加项目”链接时,它会滑动打开,添加一个“ on”类,并淡入一个通知,指出已添加“项目名称”

我正在努力的

>如果用户单击“添加项目”链接：3秒钟后,通知应消失,篮子滑盖关闭,并删除“打开”类.但是,如果用户疯狂地快速单击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-但这还是有问题的(例如,如果您添加一个物品并迅速关闭篮子).

非常感谢您的投入:)

最佳答案

了解有关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()

javascript-处理jQuery中的快速点击

猜你在找的jQuery相关文章