如何防止在滑块动画完成之前多次单击滑块箭头答案

【问题标题】：How to prevent multiple clicks on slider arrows until slider animation is done如何防止在滑块动画完成之前多次单击滑块箭头
【发布时间】：2016-02-05 04:40:43
【问题描述】：

我有一个带箭头的滑块。当我多次单击这些箭头时，滑块会根据我单击箭头的次数不断滑动。在滑动动画完成之前如何防止点击箭头？

请在此处查看我的意思：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

【问题讨论】：

查看 .is(':animated') - api.jquery.com/animated-selector - 和 .stop() - api.jquery.com/stop - 基本上告诉你的上一个和下一个在幻灯片忙时返回
一种方法是在特定时间内禁用点击事件，以便在允许用户再次点击之前让您的动画有时间完成。 See this SO post

标签： javascript jquery

【解决方案1】：

您可以定义一个变量isAnimating，当您在下一个或上一个幻灯片函数中时将其设置为true，并在动画完成时设置为false（在您的淡入淡出的回调函数中）函数）。

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

请看这里：http://codepen.io/anon/pen/XXPOQY

【讨论】：