Для поля поиска пользователь быстро вводит текст. В чём разница между `debounce`, `throttle` и `AbortController` с точки зрения UX и нагрузки на сеть и бэкенд? Что лучше выбрать для live-поиска?

Для поиска чаще используют debounce, а не throttle, потому что:

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

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

Пример debounce на JavaScript:

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

const search = debounce((query) => {
  console.log('Поиск:', query);
  // вызов API поиска
}, 300);

inputElement.addEventListener('input', (e) => {
  search(e.target.value);
});