如何防止多次单击滑块箭头，直到完成滑块动画

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 (在回调函数中设置为一个淡出函数)。

如果将isAnimating函数设置为true，则在这些下一个函数和前一个函数的顶部进行简单检查以返回false，将防止动画排队。

见此处：http://codepen.io/anon/pen/XXPOQY