Обработка быстрых кликов в jQuery

Question

Я строю сайт (с jQuery 1.4), который имеет плавающую (фиксированную позицию) корзину.

Текущий работает функциональность (Demo here):

• Когда пользователь щелкает сама корзина она переключает слайды открыто/закрыто и переключает «заперта» класса
• Когда пользователь щелкает «добавить элемент» на странице, где она открывается, добавляет класс «вкл» и исчезает в уведомлении о том, что добавлено «название элемента»

Wha t Я борется с

• Если пользователь нажал ссылку «добавить товар»: через 3 секунды уведомление должно исчезнуть, слайд корзины закрыт и класс «вкл» будет удален. BUT Это нужно учитывать, если пользователь отчаянно щелкает 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() функции (которая могла бы скрыть baske т и т. д.)

затем в каждом клике, .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;}); 
} 
} 

вместо отмены анимации - просто не запускать их, если они уже запущен

PS. Тайм-ауты в порядке, но вы должны удержать всех обработчиков, чтобы они могли очистить таймаут, поэтому он становится уродливым ...;)