jquery句柄如果多次点击

Question

我想在我自己的js代码中使用jquery库做自己的网页滑动动画，我有一个函数，我在那个函数中写了一个动作方法，当使用setInterval调用自动重复时，它的工作良好，但如果连续多次点击next或prev按钮，它会不断调用滑动函数多少次点击，因此不断调用方法，折叠正在制作的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); 
}