wbrapist
@wbrapist
Ты в порядке?

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

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

Ловлю событие - клик
nextSlideButton.onclick = function () {
...
};


В коде происходит анимация по таймеру:
setTimeout(function() {
  slides[slidesNumber - 1].style.left = '0px';
},600);

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

Пробовал сделать Timeout всему телу события:
nextSlideButton.onclick = function () {
  setTimeout(function() {
    ...
  },1000);
};

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

Что можно сделать в данной ситуации?
  • Вопрос задан
  • 302 просмотра
Решения вопроса 2
maxsof
@maxsof
Фронтенд-разработчик
Я делал так: при клике добавлял класс на этот элемент и в скрипте проверял существует ли этот класс и если нет, то выполнял действие. После того как действие закончилось, этот класс удаляется.
Ответ написан
Комментировать
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
Самый верный путь - ставить флаг перед началом анимации и убирать его по окончанию.

nextSlideButton.onclick = function () {
if(this.proc) return false;
this.proc=1;
  setTimeout(function() {
    ...
nextSlideButton.proc=0;
  },1000);
};
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
k12th
@k12th
console.log(`You're pulling my leg, right?`);
В _ есть пара функций как раз для этого: underscorejs.org/#throttle и underscorejs.org/#debounce. Они немного отличаются, попробуйте сами, какая больше подойдет. (Если не хочется тащить всю _ в проект, можно найти отдельные пакеты или имплементацию на ванилле).
Ответ написан
Комментировать
hahenty
@hahenty
('•')
Может быть, следует возложить анимацию на css, а из скрипта менять класс для кнопки? Тогда перекликивание не испортит анимацию.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы