Debounce: что это такое и как улучшить пользовательский опыт с его помощью

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

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

let count = 0;
function handleClick() {
  count++;
  console.log(`Button was clicked ${count} times.`);
}
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

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

Чтобы решить эту проблему, мы можем использовать debounce. Реализуем это с помощью функции setTimeout. Здесь мы будем использовать delay - задержку времени, такую чтобы она была достаточно длинной, чтобы несанкционированные клики на кнопку не считались. В нашем случае мы установим временную задержку в 500 миллисекунд:

let count = 0;
function handleClick() {
  count++;
  console.log(`Button was clicked ${count} times.`);
}
const button = document.querySelector('button');
function debounce(func, delay) {
  let timerId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timerId);
    timerId = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  }
}
const debounceHandleClick = debounce(handleClick, 500);
button.addEventListener('click', debounceHandleClick);

Теперь, если пользователь быстро нажимает на кнопку несколько раз, мы получим только одно сообщение в консоль:

Button was clicked 1 times.

И только после 500 миллисекунд произойдет следующий вызов функции.

Обратите внимание, что мы оборачиваем исходную функцию внутри функции debounce, возвращаемой из-за функции. Это затем позволяет нам сохранить ссылку на таймер, который мы можем очистить при следующем срабатывании функции. Мы также используем apply для передачи правильного контекста и аргументов в функцию оболочки.