Как при быстром многократном клике по кнопке обрабатывать только первый клик — jQuery?

Question

[sutkin main]

Есть такая задача:
Элемент (например div) должен двигаться влево по клику по кнопке.
Кликнули по кнопке, скрипт изменил свойство элемента left на определенный шаг. Все ок.
Необходимо чтобы после клика по кнопке, пока объект не перестанет двигаться, кнопка не реагировала бы на другой клик по ней. Т.е. грубо говоря, пока обрабатывается первый клик (происходит какая-то анимация и т.п.), на еще один клик кнопка не должна реагировать. Как анимация завершится, кнопка снова может обрабатывать клик. Не знаю как это сделать.
Если несколько раз кликнуть по кнопке быстро, то все обработчики становятся в очередь и обрабатываются. В итоге если быстро кликнули по кнопке три раза, то элемент переместится на 3 шага. А мне жизненно важно чтобы элемент перемещался на один шаг. Как только шаг завершится, кнопка доступна для еще одного клика и т.д.
Вариант со скрытием кнопки, пока идет анимация, не подходит.

Как быть? Можно ли из многочисленных кликов по кнопке обрабатывать только первый клик? А остальные клики не выстраивать в очередь. Как только завершится код внтри обработчика клика, то по кнопке снова можно кликать???

var i = 0,
		sectionlength = $('.section').length-1;
		function scrollSlide () {
			var first = $('.section')[i];
			i++;
			(i > 3)?i=0:false;
			$('.section').animate({'transform': 'scale(0.9)'}, {
				step: function(){
					$('.section').css({'transform': 'scale(0.9)'});
				}}, 700);

			$('.parent_in').delay(1000).animate({
				'margin-left': '-'+ i + '00vw'
			}, 700);

			$('.section').delay(1400).animate({top: 0}, {
				step: function(){
					$('.section').css({'transform': 'scale(1)'});
				}}, 500);
			}
	$('.parent').on("click", function () {
		scrollSlide(); тут нужно вызывать функцию после того, как первый закончит свою работу и так каждый раз
	});

Answer 1

[Денис Инешин]

var clicked = false;

$('.button').on('click', function () {
    if (clicked) {
        return;
    }

    clicked = true;

    // animate
});

// далее, на animation success ставим clicked = false обратно.

Comments

[sutkin main]

спасибо)

Answer 2

[Дмитрий Ковальский]

disable кнопке проставлять нельзя? или не помогает?

Comments

[Алексей Уколов]

Это самое адекватное решение задачи.
Есть еще одно - устанавливать на кнопку одноразовый обработчик через one и ставить его снова в конце анимации.

[sutkin main]

Алексей Уколов: мне нужно будет его вызывать многократно поэтому one просто не подходит(((

[sutkin main]

Дмитрий Ковальский Дмитрий Ковальский; я что-то не могу понять куда подставить? disable??? можете чуть по подробнее???

[Алексей Уколов]

kapko main: что значит "многократно"? Я же написал - по окончании обработчика ставите его снова при помощи one - получается бесконечный цикл, в котором кнопка в момент показа анимации не имеет обработчика - хоть закликайтесь по ней, ничего не произойдет.

Но вариант с disabled проще и логичнее.

[Дмитрий Ковальский]

kapko main: изучайте атрибуты html input. там есть тот который называется disable или disabled. в начале обработчика проставляете его в true у кнопки, а на выходе в false