Как предотвратить JQuery от очереди (цепочки)

Question

Сценарий: вы можете нажать кнопку, и некоторое содержимое переместится (.animate) влево. Если вы быстро нажмете кнопку примерно 3 раза, то JQuery квест 3. Оживите слева в порядке.

Я не хочу этого! Я буду предотвращать эту очередь, поэтому кнопка будет работать только после завершения анимации. Спасибо за каждое облачение!

Псевдокод:

IF # Контент НЕ анимирован (стоит на месте)

ТО При нажатии кнопки

Анимация Contet CSS "left" + 900px

Иначе Вы не можете нажать кнопку сейчас. Но если вы нажмете на кнопку, то она не будет вставлять другую анимацию.

Answer 1

Вы можете использовать селектор :animated для запуска кода на основе анимированного состояния элемента.

if( $('#Content').is(':not(:animated)') ) {
    // run your animation
}

Здесь также используется селектор :not() и метод .is() для возврата логического значения.

Или вы можете добавить класс к кнопке при запуске анимации и использовать этот класс в качестве флага, чтобы определить,анимация должна запуститься.

Класс может также стилизовать кнопку, чтобы дать отзыв о том, что она не должна быть нажата снова.

$('#myButton').click(function() {
    $button = $(this);
    if( !$button.hasClass( 'disabled' ) ) {
        $button.addClass( 'disabled' );
        $('#Content').animate({left: '+=900'}, function() { $button.removeClass('disabled') });
    }
});

Answer 2

Вы всегда можете отменить привязку событие click при его нажатии.Затем передайте обратный вызов animate , который будет повторно связывать click после завершения анимации.