Как избежать повторной обработки (дублирования) операций?

Повторная обработка операций может привести к ошибкам, лишней нагрузке на сервер и некорректному состоянию приложения. Например, многократный клик по кнопке "Отправить" может создать несколько одинаковых заказов. Для решения этой проблемы используют несколько подходов в зависимости от контекста.

Дебаунс (Debounce)

Дебаунс откладывает выполнение функции до тех пор, пока не пройдет определенное время без новых вызовов. Это полезно для обработки событий, которые происходят часто, например, ввод текста в поле поиска. Вместо отправки запроса на каждый символ, запрос отправляется только после паузы в наборе.

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Использование
const searchInput = document.getElementById('search');
const fetchResults = debounce((query) => {
  console.log('Fetching results for:', query);
}, 300);
searchInput.addEventListener('input', (e) => fetchResults(e.target.value));

Троттлинг (Throttle)

Троттлинг гарантирует, что функция выполняется не чаще, чем раз в заданный интервал времени. Это полезно для обработки событий прокрутки или изменения размера окна, где важно обновлять интерфейс, но не слишком часто.

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Использование
window.addEventListener('scroll', throttle(() => {
  console.log('Scroll event handled');
}, 200));

Идемпотентность (Idempotency)

Для сетевых запросов, особенно в финансовых операциях, критично избегать дублирования. Идемпотентность означает, что повторный запрос с теми же данными не изменяет результат. На клиенте можно блокировать кнопку после нажатия, а на сервере использовать уникальные ключи (idempotency keys), чтобы игнорировать повторные запросы с одинаковым ключом.

// Пример отправки запроса с ключом идемпотентности
async function createOrder(orderData) {
  const idempotencyKey = generateUniqueId(); // Например, UUID
  const response = await fetch('/api/orders', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Idempotency-Key': idempotencyKey
    },
    body: JSON.stringify(orderData)
  });
  return response.json();
}
// Сервер проверяет ключ и, если он уже обработан, возвращает предыдущий результат.

Выбор подхода зависит от задачи: дебаунс для событий ввода, троттлинг для частых UI-событий, а идемпотентность для критичных операций с данными. Правильное применение этих техник улучшает производительность и надежность приложения.