Как предотвратить множественные нажатия на стрелки слайдера до тех пор, пока не будет выполнена анимация слайдера

Question

У меня есть слайдер со стрелками. Когда я нажимаю на эти стрелки много раз, слайдер постоянно скользит в зависимости от того, сколько раз я нажимаю стрелку. Как вы не нажимаете на стрелку до тех пор, пока скользящая анимация не будет выполнена?

Пожалуйста, смотрите, что я имею в виду моего пера здесь: http://codepen.io/gianaguilar/pen/JGaxKL

Попробуйте нажать на стрелки несколько раз и как ползунок отвечает. Мне нужно иметь возможность скользить по одному клику за раз.

Спасибо!

Вот код JQuery

var $visibleSlide, getDataSlide, sliderInterval, getDataNextSlide, getDataPrevSlide, getDataNavDot; 
var fadeDuration = 1000; 
var pause = 8000; 

//show first slide 
$('.slides li:first-child').css('display', 'block'); 

//show first nav dot 
$('.nav li:first-child').addClass('active-cd'); 

//find out what slide is visible and get its data attribute 
function getSlideInfo() { 
    $visibleSlide = $('.slides').find('li:visible'); 
    getDataSlide = $visibleSlide.data('n'); 
    getDataNextSlide = $visibleSlide.next().data('n'); 
    getDataPrevSlide = $visibleSlide.prev().data('n'); 
} 

//show next slide 
function showNextSlide() { 
    getSlideInfo(); 

    $('.nav li').removeClass('active-cd'); 

    if (getDataSlide < 3) { 
    $visibleSlide.fadeOut(fadeDuration); 
    $visibleSlide.next().fadeIn(fadeDuration); 
    $('.nav li[data-cd=' + getDataNextSlide + ']').addClass('active-cd'); 
    } else { 
    $visibleSlide.fadeOut(fadeDuration); 
    $('.slides li:first-child').fadeIn(fadeDuration); 
    $('.nav li:first-child').addClass('active-cd'); 
    } 
} //end showNextSlide 

function showPrevSlide() { 
    getSlideInfo(); 

    $('.nav li').removeClass('active-cd'); 

    if (getDataSlide > 1) { 
    $visibleSlide.fadeOut(fadeDuration); 
    $visibleSlide.prev().fadeIn(fadeDuration); 
    $('.nav li[data-cd=' + getDataPrevSlide + ']').addClass('active-cd'); 
    } else { 
    $visibleSlide.fadeOut(fadeDuration); 
    $('.slides li:last-child').fadeIn(fadeDuration); 
    $('.nav li:last-child').addClass('active-cd'); 
    } 

} // end showPrevSlide 

// controls 
$('.next').on('click', showNextSlide); 
$('.prev').on('click', showPrevSlide); 

//autoplay 
function startSlider() { 
    sliderInterval = setInterval(showNextSlide, pause) 
} 
startSlider(); 
$('.slideshow').mouseenter(function() { 
    clearInterval(sliderInterval); 
}); 
$('.slideshow').mouseleave(startSlider); 

//control dots clicks 
$('.nav li').on('click', function() { 
    getDataNavDot = $(this).data('cd'); 
    getSlideInfo(); 

    $('.nav li').removeClass('active-cd'); 
    $(this).addClass('active-cd'); 

    $visibleSlide.fadeOut(fadeDuration); 
    $('.slides li[data-n=' + getDataNavDot + ']').fadeIn(fadeDuration); 
}); //end dots click 

Answer 1

Вы можете определить переменную isAnimating, которая устанавливается в true, когда вы находитесь в следующей или предыдущей функции слайд, и установить в false когда анимация завершена (в пределах функция обратного вызова к одной из ваших функций затухания).

Простая проверка в верхней части этих следующих и предыдущих функций для возврата false, если для функции isAnimating установлено значение true, это предотвратит ожидание анимации.

Смотрите здесь: http://codepen.io/anon/pen/XXPOQY