JS/Jquery защита от частых нажиманий

203

07 февраля 2018, 14:27

Предположим есть такой скрипт:

$(".event_next").click(function () {          
  $(".test").animate({'margin-left': newValue}, 3000);
}

он выполняет анимацию за 3 секунды, нужно сделать так, чтобы скрипт повторно не активировался при повторном нажатие на кнопку, пока не завершится текущее выполнение скрипта. А то пользователь может спамить кнопку.

В моём случае, у меня есть карусель которая листает изображения, и при частом нажатие всё работает не правильно.

Answer 1

Первое что пришло на ум-- создать флаг, и после выполнения анимации менять его например :

var startAnimation = true;
$(".event_next").click(function() {
            if (startAnimation) {
                startAnimation = false;
                $(".test").animate({ 'margin-left': newValue }, 3000, function() {
                    startAnimation = true;
                });
            }
        }

Answer 2

Можно блокировать кнопку на время выполнения анимации:

$(".event_next").click(function () { 
$(this).attr('disabled', true); 
     $(".test").animate({'margin-left': '150px'}, 3000); 
     setTimeout(function(){$(".event_next").attr('disabled', false);}, 3000); 
 });

.test { 
  width: 200px; 
  height: 100px; 
  border: 1px solid black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="event_next">Нажми меня</button> 
<div class="test"> 
</div>