Регулирование и подавление дребезга — Объяснение

Здравствуйте, читатели! Сегодня я узнал об эффекте дросселирования из Интернета и запутался, так как по определению он похож на устранение дребезга.
Но после дальнейшего чтения и исследования я понял разницу между дросселированием и устранением дребезга.

Здесь, в этой статье, я хочу поделиться этими знаниями со всеми вами.

Введение

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

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

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

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

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

Все еще в замешательстве? 🤔 Вот разбивка ключевых различий между дросселированием и устранением дребезга.

1. Поведение при выполнении

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

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

2. Варианты использования

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

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

3. Реализация

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

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

Давайте посмотрим на некоторые примеры кода для большего понимания.

Пример регулирования

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

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

const throttledScrollHandler = throttle(() => {
  console.log("Loading more content...");
}, 1000);
window.addEventListener("scroll", throttledScrollHandler);

В этом примере функция дросселя является оболочкой исходной функции (scrollHandler) и гарантирует, что она будет вызываться не чаще одного раза в 1000 миллисекунд (1 секунду) независимо от того, как быстро пользователь прокручивает страницу.

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

Предположим, у вас есть поле ввода поиска, которое инициирует вызов API для получения результатов поиска по мере того, как пользователь вводит текст. Без устранения дребезга вызов API будет выполняться при каждом нажатии клавиши, что приведет к чрезмерным запросам. Устранение дребезга гарантирует, что вызов API будет выполнен только после того, как пользователь приостановит ввод.

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

const debounceSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
  // Make API call with the search query
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debounceSearch(event.target.value);
});

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

Свяжитесь со мной

• ЛинкедИн
• Гитхаб