CODEWITHSUNDEEP
javascriptjquery
Nazarene Gonzales
Nazarene Gonzales

Reputation: 137

jQuery disable multiple clicks

I'm trying to create a simple JQuery slider, and I'm having trouble with the .on('click') function, if I click the next or prev button too fast it exceeds the value I expect.

Jquery Simple Slider

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);
    });
}
});

Upvotes: 0

Views: 61

Answers (2)

satwik
satwik

Reputation: 607

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)

This should do, click event gets registered only once and once the callback for animation is done then only click event is registered again and that will stop from continuously firing events

Upvotes: 2

Ahsan Sajjad
Ahsan Sajjad

Reputation: 34

Make sure the .next class is assigned to only one button.

Upvotes: 0

Related Questions