jquery handle, если несколько раз нажмите

Question

Я пытаюсь сделать собственный слайдер анимации моей веб-страницы на моем собственном js-коде, используя jquery-библиотеку, у меня есть одна функция, в этой функции я написал элемент перемещения dom с использованием метода анимации с заданным параметром, какой элемент хотите, чтобы анимация была работоспособной при работе с автоматическим повторением с использованием setInterval, но если вы нажимаете кнопку «Далее» или «Превью» непрерывно в течение нескольких раз, она постоянно вызывает функцию скольжения, сколько времени я нажимаю, так что постоянно вызывающий метод сворачивает элементы css и dom, мой слайдер некрасиво :(, пожалуйста, помогите мне, как я могу предотвратить эту проблему, я пытаюсь поиском и получить это решение, но я не могу получить решение, пожалуйста, помогите Нужного событие

клика:

$(".health-plan-slider .next").stop().click(function(){ 

      var ele_n = $(".health-plan-slider .next").attr("data-next"); 
      slideEffectNext(ele_n); 


     }); 

функция:

function slideEffectNext(dataVal) 
    { 
     dataVal = parseInt(dataVal); 
     var dataValPrev = parseInt(dataVal) - 1; 
     if(dataVal == ele_len-1) 
     { 
      $(".health-plan-slider .next").attr("data-next",0); 
     } 
     else 
     { 
      $(".health-plan-slider .next").attr("data-next", dataVal+1); 
     } 
     if(dataVal == 0) 
     { 
      $(".health-plan-slider .prev").attr("data-prev", ele_len-1); 
     } 
     else 
     { 
      $(".health-plan-slider .prev").attr("data-prev", dataVal-1); 
     } 
     $(".slider-wrap .slide-elements").removeAttr("data-cur"); 
     $(".slider-wrap .slide-elements").eq(dataVal).css("left", "920px"); 
     $(".slider-wrap .slide-elements").eq(dataValPrev).animate({ left:-920+"px"}, 1000, function() { $(".slider-wrap .slide-elements").eq(dataValPrev).css("left",920+"px");}); 
     $(".slider-wrap .slide-elements").eq(dataVal).animate({ left:0+"px"}, 1000).attr("data-cur", 1); 
    } 

Заранее спасибо

Answer 1

Использование

.stop() 

, чтобы остановить анимацию каждый раз, когда вы щелкаете следующий или пред

$('#next').stop().click(function() { 
    // your animation .. 
}) 

же за $ ('# prev ')

Answer 2

попробовать эту логику

$(".health-plan-slider .next").click(function(){ 
    if(typeof sliding != "undefined" && sliding){ 
     var ele_n = $(".health-plan-slider .next").attr("data-next"); 
     slideEffectNext(ele_n); 
    } 
}); 


function slideEffectNext(dataVal){ 
    sliding = true; 
    dataVal = parseInt(dataVal); 
    var dataValPrev = parseInt(dataVal) - 1; 
    if(dataVal == ele_len-1) 
    { 
     $(".health-plan-slider .next").attr("data-next",0); 
    } 
    else 
    { 
     $(".health-plan-slider .next").attr("data-next", dataVal+1); 
    } 
    if(dataVal == 0) 
    { 
     $(".health-plan-slider .prev").attr("data-prev", ele_len-1); 
    } 
    else 
    { 
     $(".health-plan-slider .prev").attr("data-prev", dataVal-1); 
    } 
    $(".slider-wrap .slide-elements").removeAttr("data-cur"); 
    $(".slider-wrap .slide-elements").eq(dataVal).css("left", "920px"); 
    $(".slider-wrap .slide-elements").eq(dataValPrev).animate({ left:-920+"px"}, 1000, function() { $(".slider-wrap .slide-elements").eq(dataValPrev).css("left",920+"px");}); 
    $(".slider-wrap .slide-elements").eq(dataVal).animate({ left:0+"px"}, 1000,function(){sliding = false;}).attr("data-cur", 1); 
}