javascript - jQuery禁用多次点击

Question

我正在尝试创建一个简单的 JQuery 滑块，并且我在使用 .on('click') 函数时遇到问题，如果我单击下一个或上一个按钮太快，它会超出我预期的值。

var currentSlide = 1;
var $slider = $(".slides");
var slideCount = $slider.children().length;
var slideSpeed = 500;
var slideMarginLeft = -900;
var slideMarginRight = 0;

$(".prev").on('click',function(){
if(currentSlide > 1){   
    $slider.animate({marginLeft : slideMarginLeft + 1800} , slideSpeed, function(){
        slideMarginLeft +=900;
            currentSlide--;
            console.log(currentSlide);
        });
}
});


$(".next").on('click',function(){
if(currentSlide < 5){   
    $slider.animate({marginLeft : slideMarginLeft} , slideSpeed, function(){
        slideMarginLeft -=900;
        currentSlide++;
        console.log(currentSlide);
    });
}
});

标签： javascriptjquery

Answer 1

var currentSlide = 1;
var $slider = $(".slides");
var slideCount = $slider.children().length;
var slideSpeed = 500;
var slideMarginLeft = -900;
var slideMarginRight = 0;


function previousClickCallback(animationCallback){
    return function(){
        if(currentSlide > 1){   
            $slider.animate({marginLeft : slideMarginLeft + 1800} , slideSpeed, () => {
                slideMarginLeft +=900;
                currentSlide--;
                console.log(currentSlide);
                $(".prev").once('click',previousClickCallback);
            });
        } else {
          $(".prev").one('click',previousClickCallback);
        }
    }
}

function nextClickCallback(){
    return function(){
        if(currentSlide < 5){   
            $slider.animate({marginLeft : slideMarginLeft} , slideSpeed, () => {
                slideMarginLeft -=900;
                currentSlide++;
                console.log(currentSlide);
                $(".next").once('click',nextClickCallback);
            });
        } else {
         $(".next").one('click',nextClickCallback);
        }
        
    }
}


$(".prev").one('click',previousClickCallback);
$(".next").one('click',nextClickCallback)

应该这样做，单击事件仅注册一次，一旦动画回调完成，则仅再次注册单击事件，并且将停止连续触发事件