處理jQuery中的快速點擊

我正在構建一個包含浮動（固定位置）籃子的網站（帶有jQuery 1.4）。處理jQuery中的快速點擊

電流工作功能（Demo here）：

當用戶點擊筐本身其切換滑動打開/關閉，並且切換類
了「關於鎖定」當用戶點擊一在其打開的頁面中添加項目鏈接，添加「開」類，並在通知中添加「項目名稱」已添加

Wha t我在努力

如果用戶點擊了「添加項目」鏈接：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是我發現的最接近的事 - 但即使這是有問題的（如果你添加一個項目並迅速關閉例如籃）。

會很感激的一些輸入:)

來源

2010-02-09 Alex

瞭解setTimeout和clearTimeout

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

會做化名功能，它基本上只包含whattodo()函數（可以隱藏baske t等）

然後在每一次點擊，.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()

來源

2010-02-09 16:42:02

+1。打敗我，更好的解釋。 – sberry 2010-02-09 16:44:20

您不必將其創建爲匿名用途，您可以做var t = setTimeout('whattodo()', 3000);。這也讓你做paramatised調用：var t = setTimeout('whattodo(\'string1\',false,29)', 3000); 但無論哪種方式都很好，我發現:) – Psytronic 2010-02-09 16:48:04

@Psytronic - 我知道表達式版本，但它不適合我很好，雖然這樣，它的工作原理。此外，語法顏色：D – 2010-02-09 16:50:40

我覺得你想找的.stop（）

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

來源

2010-02-09 16:36:48 Patricia

這是你所需要的一個想法：

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

，而不是取消動畫 - 只要不觸發他們，如果他們已經在運行

PS。超時是可以的，但你必須保持所有的處理程序能夠清除超時，所以它變得很難看; ...）

來源

2010-02-09 16:45:04 naugtur

爲什麼他們都是？現在，他只需要一個處理程序。而且，如果（免費）在3秒後啓動，則無法計時。 – 2010-02-09 16:46:12

並非所有這些，但那些你需要的。這只是它（IMHO）應該如何完成的想法。就像一個設計模式。從長遠來看，setTimeout成爲了我不想「過度使用」 – naugtur 2010-02-09 22:30:29

處理jQuery中的快速點擊

回答

相關問題