Как оптимизировать отправку аналитики при клике пользователя?

Оптимизация отправки аналитики при клике

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

Троттлинг

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

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

const sendAnalytics = throttle(() => {
  console.log('Отправка аналитики');
}, 1000);

document.addEventListener('click', sendAnalytics);

Дебаунсинг

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

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

const sendAnalytics = debounce(() => {
  console.log('Отправка аналитики');
}, 500);

document.addEventListener('click', sendAnalytics);

Применение

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

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