Как вызвать опциональный колбэк после последнего допустимого вызова задекорированной функции?

Что такое debounce?

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

Как реализовать debounce с опциональным колбэком?

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

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

// Пример использования
const handleInput = debounce(
  (value) => console.log('Search:', value),
  300,
  () => console.log('Debounced call completed')
);

handleInput('hello');
handleInput('hello world'); // Только этот вызов выполнится через 300 мс

Где применяется?

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

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