JQuery - избегать двойных кликов

Question

У меня есть простая анимация, проблема в том, что я хочу, чтобы анимация закончилась, прежде чем я смогу нажать снова?

$(".next").click(function() {

 $('#result').animate({
    left: '-=250',
   }, 1000, function() {
  pos = $('#result').position();

  if (pos.left <= -550) {
$('.next').hide();
  }
  if (pos.left <= -250) {
    $('.prev').show();
  }
});

Answer 1

отключите кнопку при нажатии и используйте полный вызов функции .animate для ее повторного включения:

.animate (свойства [, длительность] [, замедление] [, завершено])

complete Функция, вызываемая после завершения анимации.

Answer 2

Ответ прост, используйте метод .data(), чтобы установить кликабельный флаг на элементе.Вы можете снова включить его в своей полной функции.

От jQuery.com: .data () Документация

Метод .data () позволяет намприсоединять данные любого типа к элементам DOM способом, который защищен от циклических ссылок и, следовательно, от утечек памяти.

Мы можем установить несколько отдельных значений для одного элемента и получить их позже:

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

Обратите внимание, что мы сохраняем $(this) в btn, чтобы к нему можно было получить доступ после закрытия функции complete .

$(".next").click(function() {
  var btn = $(this);
  if (btn.data('running'))
    return;

  btn.data('running', true);

  $('#result').animate({
    left: '-=250',
    }, 1000, function() {
       pos = $('#result').position();

       if (pos.left <= -550) {
         $('.next').hide();
       }
       if (pos.left <= -250) {
         $('.prev').show();
       }

       // Unset it here, this lets the button be clickable again
       btn.data('running', false);
    }
   );
});

Answer 3

Вы можете сделать так, чтобы анимация автоматически заканчивалась до повторного запуска animate:

$('#result').stop(true, true).animate({ ...

Answer 4

Отключите кнопку при нажатии и используйте функцию «SetTimeout», чтобы включить ее через тот же период времени.

$(".next").click(function() {

   $(this).enabled = false;
   setTimeout('enableButtons()', 250);     }

   $('#result').animate({
      left: '-=250',
   }, 1000, function() {
    pos = $('#result').position();

  if (pos.left <= -550) {
$('.next').hide();
  }
  if (pos.left <= -250) {
    $('.prev').show();
  }
});

function enableButtons() {
    $(".next").enabled = true;
}