Как разрешить нажатие на кнопку не допуская частых кликов?

Question

[wbrapist]

Здравствуйте.

Ловлю событие - клик

nextSlideButton.onclick = function () {
...
};

В коде происходит анимация по таймеру:

setTimeout(function() {
  slides[slidesNumber - 1].style.left = '0px';
},600);

Суть в том, что если часто нажимать на кнопку, анимация начинает "перемешиваться" и получается довольно плохо.

Пробовал сделать Timeout всему телу события:

nextSlideButton.onclick = function () {
  setTimeout(function() {
    ...
  },1000);
};

В итоге работает, но частично. Если быстро нажимать много раз, задержка перед первым выполнением тела есть, а потом почему-то все остальные клики сразу отрабатываются скопом, естественно, уже без задержки.

Что можно сделать в данной ситуации?

Answer 1

[Максим Софронов]

Я делал так: при клике добавлял класс на этот элемент и в скрипте проверял существует ли этот класс и если нет, то выполнял действие. После того как действие закончилось, этот класс удаляется.

Answer 2

[Павел Корнилов]

Самый верный путь - ставить флаг перед началом анимации и убирать его по окончанию.

nextSlideButton.onclick = function () {
if(this.proc) return false;
this.proc=1;
  setTimeout(function() {
    ...
nextSlideButton.proc=0;
  },1000);
};

Answer 3

[Константин Китманов]

В _ есть пара функций как раз для этого: underscorejs.org/#throttle и underscorejs.org/#debounce. Они немного отличаются, попробуйте сами, какая больше подойдет. (Если не хочется тащить всю _ в проект, можно найти отдельные пакеты или имплементацию на ванилле).

Answer 4

[Сергей Сергей]

Может быть, следует возложить анимацию на css, а из скрипта менять класс для кнопки? Тогда перекликивание не испортит анимацию.

Comments

[wbrapist]

Можно, я просто не хочу тащить за слайдером "лишний" CSS-код.

[Сергей Сергей]

wbrapist: так-то да, весомая проблема.
Но в слайдере кнопку блокировать нежелательно, вдруг надо сразу несколько слайдов отлистать?

[wbrapist]

Сергей Сергей: зачем? Чтобы дойти до нужного?
Я собираюсь сделать навигацию, ну или как называется. На многих слайдерах снизу. Позволяет перейти на конкретный сразу.

[wbrapist]

Сергей Сергей: конечно, мне, как пользователю, не очень приятно, когда кнопка блокируется, я хотел бы листать слайды со скоростью света. Но в принципе, ничего в этом критичного не вижу.