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

我有一个带箭头的滑块。当我多次点击这些箭头时，滑块会不断滑动，具体取决于我点击箭头的次数。在滑动动画完成之前，如何防止点击箭头？如何防止多次点击滑块箭头，直到完成滑块动画

请明白我的意思，我的笔在这里：上箭头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

来源

2016-02-04 Gian Aguilar

直视。是（ '：动画'） - https://api.jquery.com/animated-selector/ - 和.stop（） - HTTPS：//api.jquery .com/stop/- 如果幻灯片忙碌，基本上会告诉您的上一个和下一个返回 –

一种方法是在特定的时间内禁用点击事件，让您的动画时间完成，然后才允许用户点击再次。 [看到这个帖子]（http://stackoverflow.com/questions/32002366/javascript-disable-the-click-event-for-1-second-after-an-id-is-clicked） – crazymatt

您可以定义一个变量isAnimating，当你在一个或下一个幻灯片功能设置为true，并设置为false动画完成时（内回调函数给你的一个淡出功能）。

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

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

来源

2016-02-04 20:40:43 Prusprus

太棒了！非常感谢！ –

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

回答

相关问题