Что такое дебаунсинг и дросселирование?

Что такое Debouncing и throttling?

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

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

устранение дребезга

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

Как это работает

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

Пример кода

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

function handleInput() {
  console.log('Handling input');
}
const debouncedHandleInput = debounce(handleInput, 500);
document.addEventListener('input', debouncedHandleInput);

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

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

Затем мы определяем функцию handleInput, которую хотим устранить дребезг, и создаем ее новую версию с дребезгом, используя debounce(handleInput, 500). Мы добавляем в документ прослушиватель событий, который вызывает debouncedHandleInput при срабатывании события input.

Пример использования в реальной жизни

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

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

Дросселирование

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

Как это работает

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

Пример кода

function throttle(func, delay) {
  let timerId;
  return function (...args) {
    if (!timerId) {
      timerId = setTimeout(() => {
        func.apply(this, args);
        timerId = null;
      }, delay);
    }
  };
}

function handleScroll() {
  console.log('Handling scroll');
}
const throttledHandleScroll = throttle(handleScroll, 500);
window.addEventListener('scroll', throttledHandleScroll);

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

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

Затем мы определяем функцию handleScroll, которую хотим дросселировать, и создаем новую ее версию с дросселированием, используя throttle(handleScroll, 500). Мы добавляем прослушиватель событий к объекту окна, который вызывает throttledHandleScroll при запуске события scroll.

Пример использования в реальной жизни

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

Еще один реальный пример использования регулирования – анимация пользовательского интерфейса. Анимации часто требуют большого количества вызовов функций для достижения плавного движения, но слишком много вызовов функций могут вызвать проблемы с производительностью. Регулируя функцию анимации, мы можем гарантировать, что анимация останется плавной, а также ограничим количество вызовов функции.