В случае отслеживания курсора пользователя и логирования его координат, как можно оптимизировать вызов функции?

Событие mousemove срабатывает очень часто (десятки раз в секунду), что может создать избыточную нагрузку.

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

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

• Принцип: "Вызывай функцию не чаще, чем раз в N миллисекунд".

• Идеально для: Непрерывных потоков событий, где важна регулярность обновлений (например, перетаскивание элементов, отслеживание скролла, резизинг окна).

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall < delay) {
      return; // Игнорируем вызов, если с прошлого вызова прошло мало времени
    }
    lastCall = now;
    return func.apply(this, args);
  };
}

const throttledLog = throttle((x, y) => {
  console.log(`Cursor at: ${x}, ${y}`);
}, 100); // Логируем максимум 10 раз в секунду

document.addEventListener('mousemove', (e) => {
  throttledLog(e.clientX, e.clientY);
});

Debouncing (Дебаунсинг)

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

• Принцип: "Вызывай функцию только если после последнего события прошло N миллисекунд, и новых событий не было".

• Идеально для: Сценариев, где важна только конечная точка после серии быстрых событий (например, поиск по вводу в поле, валидация формы, логирование окончания resize).

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId); // Сбрасываем таймер при каждом новом событии
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedLog = debounce((x, y) => {
  console.log(`Cursor finally at: ${x}, ${y}`); // Сработает после остановки курсора
}, 250);

document.addEventListener('mousemove', (e) => {
  debouncedLog(e.clientX, e.clientY);
});

Вывод: Для оптимизации отслеживания курсора используйте троттлинг, если вам нужны регулярные обновления координат во время движения. Используйте дебаунсинг, если вам важно залогировать позицию, в которой пользователь остановил курсор.