Выпуск события анимации карусели

Question

У меня проблема с карусели, которую я построил. Он содержит элементы внутри контейнера, которые перемещаются «влево» по размеру видимого контейнера при нажатии кнопки с перемещением класса moveCarouselRight.

Проблема заключается в том, что, когда пользователь нажимает слишком быстро, т.е. двойной щелчок, анимация, похоже, срабатывает дважды, что означает, что элементы не установлены надлежащим образом в контейнере, как если бы первая «левая» операция не была завершена.

Как вы можете видеть, я попытался исправить это с помощью «отключенного» флага, но кажется, что второе событие щелчка запускается до того, как js из первого события достигло этой строки кода.

var disabled = false; 

$('.moveCarouselRight').on('click', function() { 

if (!disabled) { 

    disabled = true; 

    //change css property 'left' depending on container size 

    disabled = false; 
} 
}); 

Ссылка на jsFiddle:
jsfiddle.net/6TPcT/5

Answer 1

Используйте это:

JS

$(".moveCarouselRight").dblclick(function(event){ 
    event.preventDefault(); 
}); 

ИЛИ

$(".moveCarouselRight").dblclick(function(event){ 
    return false; 
}); 

ИЛИ

$(".moveCarouselRight").one("click", function(event) { 
    //do something 
}); 

Ссылка: http://api.jquery.com/one/

Answer 2

Я зафиксировал это путем связывания события щелчка на селектор на нагрузке:

$('.selector').click(moveLeft); 

В методе я развязал щелчок случай:

function moveLeft() { 
    $(this).unbind('click'); 
    //css transition stuff 
} 

Затем я добавил слушатель к концу Css переходов:

$("selector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    $(this).siblings('.nextThree').click(moveThreeRight); 
}); 

Работает очарование :)

Спасибо за помощь в этом