Как запретить клик пока функция не выполнится?

Question

[Alexey10]

Ребят, всем привет)
Такая проблема:
Есть кнопка, при клике на которую, добавляется классы animate.css
Все работает, но когда я повторно кликаю на кнопку, пока анимация еще не завершилась, то начинаются глюки. Как мне запретить клик, до того момента, пока анимация не завершиться . Я знаю, что можно как-то коллбек создать для функции, который будет выполняться после завершения этой функции. Каким образом поступить? (просто не хочется вешать кнопке типа disabled на время, это не совсем хорошо).

$('#main-button-next').on('click', function(event) {
	      	addOutSlide();
});

function addOutSlide(){
				$(thisSwiper).find('.swiper-slide-active, .swiper-slide-duplicate-active').find('.title-slide, .text-page-content').removeClass(InLeft).removeClass(InRight).addClass(OutLeft).css({
					'animation-delay': '.4s',
					'animation-duration': animationDuration
				});

}

Answer 1

[zaartix]

если речь о таймингах менее 1 сек, то действительно дизейблить кнопку не очень хорошо, выглядеть будет странно.

можно схитрить: дизейблить, но со спецстилями, чтоб кнопка не отличалась от активной (класс временно вешать к примеру)

Answer 2

[FatMike]

var disable=false;
$('#main-button-next').on('click', function(event) {
If (disable) {return};
disable=true;
addOutSlide();
disable=false;

});