Блог

Главная - Вопросы по программированию - jQuery отключает несколько кликов

jQuery отключает несколько кликов

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать простой слайдер jQuery, и у меня возникли проблемы с функцией .on (‘click’), если я нажимаю кнопку next или prev слишком быстро, это превышает ожидаемое значение.

Простой слайдер Jquery

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

Комментарии:

1. Почему бы не вызвать currentSlide ; перед .animate ?

2. Пожалуйста, включите также свой HTML-код или, что было бы еще лучше, создайте фрагмент, воспроизводящий вашу проблему.

Ответ №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)

Это должно сработать, событие click регистрируется только один раз, и как только обратный вызов для анимации выполнен, снова регистрируется только событие click, и это прекратит непрерывное запуск событий

Комментарии:

1. Мне нравится логика, но консоль говорит, что .once() не является функцией

Ответ №2:

Убедитесь, что класс .next присвоен только одной кнопке.