Как предотвратить несколько кликов, используя JavaScript или jQuery?

Question

var slideContainer = ('#slider');  
var width = 720;

function slide () {  
  if ( parseInt( $slideContainer.css('marginLeft') ) >= -2160 ) {
    $slideContainer.animate({'margin-left': '-='+width},200);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='button' onclick='slide()'></a>

У меня есть эта простая функция, проблема в том, что когда я нажимаю несколько раз кнопку на кнопке со скоростью анимации более 150, она перемещает контейнер слайдера влевоболее -2160 лимит в моем условии if.

Answer 1

var slideContainer = ('#slider');  
var width = 720;
var clicked = false;

function slide () {  
      if ( clicked ) return;
      clicked = true;
      if (parseInt( $slideContainer.css('marginLeft') ) >= -2160 ) {
        $slideContainer.animate({'margin-left': '-='+width},200,"linear",()=>{
clicked=false;});
       }
}

<a class='button' onclick='slide()'></a>

Answer 2

Вы можете достичь этого любым из способов -

1. Вы можете использовать переменную флага, чтобы указать, что анимация все еще находится в процессе - сначала установите false, затем установите true, когда анимация запускается, и false, когда анимация завершится, используйтеэтот флаг с & выражением, если.
2. Немного сложный, но все же решающий задачу, вы можете попробовать это - внутри слайда функции напишите следующий фрагмент -

var events = $._data(sliderContainer[0], 'events');
                        handler = events.click;
                        events.click = null;

slideContainer.animate({'margin-left': '-='+width},{duration: 200, complete:function(){evends.click = handler }});

Надеюсь, это поможет ..