> Как предотвратить двойной заказ при двойном клике на кнопку? (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: sferaplatform.ru

Стек: JavaScript

> Пример ответа

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

JAVASCRIPT
const button = document.getElementById('submitBtn');

button.addEventListener('click', function(event) {
  // Отключаем кнопку, чтобы предотвратить повторный клик
  this.disabled = true;
  
  // Выполняем основное действие (например, отправка запроса)
  submitOrder()
    .then(() => {
      // После успешного завершения можно снова включить кнопку (если нужно)
      this.disabled = false;
    })
    .catch(error => {
      // В случае ошибки тоже разблокируем кнопку
      this.disabled = false;
      console.error('Ошибка:', error);
    });
});

Альтернативные подходы:

Флаг-блокировка - если кнопку нельзя отключать по дизайну:

JAVASCRIPT
let isProcessing = false;
button.addEventListener('click', function() {
  if (isProcessing) return;
  isProcessing = true;
  // ... логика
});

Debounce - для случаев, когда двойной клик происходит очень быстро (менее 300 мс):

JAVASCRIPT
function debounce(fn, delay = 300) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
button.addEventListener('click', debounce(handleClick, 300));

Отмена события - предотвращение всплытия (менее надёжно, так как не защищает от программных вызовов):

JAVASCRIPT
button.addEventListener('click', function(e) {
  e.preventDefault();
  // ... логика
});

Рекомендация: Для большинства сценариев (отправка формы, создание заказа) используйте первый вариант с disabled. Он интуитивно понятен пользователю и гарантирует защиту от повторных вызовов, даже если запрос ещё не завершён.