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

Проблема дублирования запросов

Когда пользователь быстро кликает кнопку отправки формы или вводит текст в поисковую строку, браузер может отправить несколько одинаковых запросов к серверу. Это приводит к избыточной нагрузке на сервер, возможным ошибкам (например, дублирование заказов) и ухудшению производительности приложения.

Основные подходы к решению

• Debounce — откладывает выполнение запроса до тех пор, пока не пройдет заданный интервал времени после последнего действия. Идеально для поисковых подсказок при вводе текста.
• Throttle — ограничивает выполнение запроса не чаще одного раза за указанный интервал. Подходит для обработки скролла или изменения размера окна.
• Отмена предыдущего запроса — с помощью AbortController можно отменить предыдущий запрос, если новый уже отправлен. Полезно для автодополнения.
• Кэширование — сохранение ответа от сервера и возврат его при повторном запросе без обращения к серверу. Эффективно для данных, которые редко меняются.

Примеры кода

Пример реализации debounce для поискового запроса:

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

const search = debounce(async (query) => {
  const response = await fetch(`/api/search?q=${query}`);
  const data = await response.json();
  // обновить UI
}, 300);

document.getElementById('searchInput')
  .addEventListener('input', (e) => search(e.target.value));

Пример отмены предыдущего запроса с AbortController:

let controller;

async function search(query) {
  if (controller) controller.abort();
  controller = new AbortController();
  try {
    const response = await fetch(`/api/search?q=${query}`, {
      signal: controller.signal
    });
    const data = await response.json();
    // обновить UI
  } catch (err) {
    if (err.name !== 'AbortError') throw err;
  }
}

Вывод

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