Tengo un carrusel el cual uso el evento mousewheel DOMMouseScroll
para moverlo con la rueda del mouse, uso el siguiente condicional para detectar si se mueve la rueda hacia arriba o hacia abajo.
event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0
Funciona bien pero cuando muevo rápido la rueda del mouse ocurre muchas veces el evento y se buguea el carrusel.
Como puedo hacer para bloquear el evento se bloquee de alguna forma mientras finaliza la animación de mi carrusel.
Este el codigo completo del evento que llamo.
$(document).on('mousewheel DOMMouseScroll', "#"+id+" .element", function(event){
event.preventDefault();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
remove_styles();
$("#"+id+" .content_carrusel ."+actual_record).addClass('previous');
$("#"+id+" .content_carrusel ."+new_element(1)).addClass('actual');
$("#"+id+" .bullet ."+actual_record).addClass('active');
var init = new_element(1);
setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('card_next');}, 50);
setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('next'); } , 100);
new_element(-1);
}
else
{
remove_styles();
$("#"+id+" .content_carrusel ."+actual_record).addClass('next');
$("#"+id+" .content_carrusel ."+new_element(-1)).addClass('actual');
$("#"+id+" .bullet ."+actual_record).addClass('active');
var init = new_element(-1);
setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('card_previous');}, 50);
setTimeout(function(){ $("#"+id+" .content_carrusel ."+init).addClass('previous'); } , 100);
new_element(1);
}
});