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

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

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

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

Пример:

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

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

Пример кода:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

В этом примере функция handleScroll будет запускаться только один раз каждые 2 секунды (2000 миллисекунд), независимо от того, насколько быстро или часто пользователь прокручивает страницу.

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

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

Пример:

Представьте, что вы находитесь в групповом чате и печатаете сообщение. Вы не хотите отправлять уведомление своим друзьям каждый раз, когда вы нажимаете клавишу. Вместо этого вам нужно подождать, пока вы не перестанете печатать на несколько секунд, прежде чем отправлять уведомление «ввод...». Это откат — отправка уведомления только после паузы при наборе текста.

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

Пример кода:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

В этом примере функция handleInput запустится только после того, как пользователь перестанет печатать в течение 500 миллисекунд.

? Когда использовать регулирование или устранение дребезга?

⚡️ Используйте регулирование, если хотите контролировать частоту вызова функции с течением времени. Подходит для таких мероприятий, как:

=> Прокрутка
=> Изменение размера окна
=> Движения мыши

⚡️ Используйте устранение дребезга, если хотите гарантировать, что функция будет вызываться только после завершения события. Подходит для таких мероприятий, как:

=> Вводим в строку поиска
=> Отправка форм
=> Изменение размера окна (для таких действий, как настройка макета)

Вывод ✅

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

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

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

Удачного программирования! ?