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

Question

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

Текущий рабочий функциональность ( Демонстрация здесь ):

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

С чем я борюсь

• Если пользователь щелкнул ссылку «добавить элемент»: через 3 секунды уведомление должно исчезнуть, слайд корзины закроется, а класс «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/

Answer 2

Это идея того, что Вам нужно:

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

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

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

Answer 3

Я думаю, вы ищете .stop ()

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