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

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

JAVASCRIPT
const button = document.querySelector('#submitBtn');

button.addEventListener('click', async function(event) {
  event.preventDefault();
  this.disabled = true; // Блокируем кнопку
  this.textContent = 'Отправка...';

  try {
    await fetch('/order', { method: 'POST' });
    // Успех
  } catch (error) {
    console.error('Ошибка:', error);
  } finally {
    this.disabled = false; // Разблокируем
    this.textContent = 'Отправить';
  }
});

Если операция не асинхронная, можно использовать флаг:

JAVASCRIPT
let isProcessing = false;

button.addEventListener('click', function() {
  if (isProcessing) return;
  isProcessing = true;

  // ... логика заказа ...

  isProcessing = false;
});

Также можно добавить CSS-стиль для визуальной блокировки:

CSS
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Для React-приложений удобно использовать состояние:

JSX
const [isSubmitting, setIsSubmitting] = useState(false);

const handleSubmit = async () => {
  if (isSubmitting) return;
  setIsSubmitting(true);
  await placeOrder();
  setIsSubmitting(false);
};

<button disabled={isSubmitting} onClick={handleSubmit}>
  {isSubmitting ? 'Отправка...' : 'Заказать'}
</button>

Главное блокировать кнопку до завершения операции, а не только на время анимации.