Дебаунс событий для плавного интерфейса!

Частые события resize или input могут перегружать страницу и тормозить анимации. Решение — дебаунс с правильными опциями.

Проблемный код:

window.addEventListener('resize', () => {
  console.log('Width:', window.innerWidth);
  updateLayout();
});

Проблема: при быстром resize — десятки вызовов в секунду.

Улучшенный дебаунсер:

function debounce(fn, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Применяем с cleanup:

const debouncedResize = debounce(() => {
  console.log('Debounced width:', window.innerWidth);
}, 300);

window.addEventListener('resize', debouncedResize);

🔥 В следующей части рассмотрим почему для scroll дебаунс не работает и как throttle решает эту проблему для плавных анимаций!

📣 Code Ready | #практика

☕️ HTML Academy — идеальный старт для тех, кто хочет стать фронтенд-разработчиком!

Интерактивные курсы по HTML, CSS, JavaScript и React, от простых тренажёров до профессиональных программ. Отлично подходит для новичков и тех, кто хочет прокачать свои навыки.

📌 Оставляю ссылочку: htmlacademy.ru

📣 Code Ready | #ресурсы

👩‍💻 Можно ли визуально показать, что на ссылку или кнопку прямо сейчас жмут?

Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас.

Покажу примеры:

• color — меняет цвет текста;

• background — подсвечивает фон;

• transform — делает анимацию «прожатия»;

• box-shadow — добавляет эффект клика.

Фишка в том, что :active работает только во время удержания. Отпустил - элемент возвращается к обычному стилю.

📣 Code Ready | #свойсво

Metanit — это подробный русскоязычный учебник по JavaScript с объяснениями и примерами. Подходит как для новичков, так и для тех, кто хочет углубиться в тонкости языка.

📌 Оставляю ссылочку: metanit.com

📣 Code Ready | #ресурсы

Throttle vs Debounce: выбираем инструмент!

Функция срабатывает только после остановки прокрутки на 300ms. Пользователь видит скачкообразные обновления интерфейса:

const debouncedScroll = debounce(() => {
  console.log('Scroll handled');
}, 300);

window.addEventListener('scroll', debouncedScroll);

Решение — throttle:

function throttle(fn, limit = 16) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Функция выполняется максимум раз в 16ms, обеспечивая плавные 60 FPS без перегрузки браузера.

const throttledScroll = throttle(() => {
  console.log('Scroll handled');
}, 16); // 16ms = 60 FPS

window.addEventListener('scroll', throttledScroll, { passive: true });

🔥 Поэтому, Throttle — для частых действий (scroll, resize). Debounce — для финального результата (поиск, валидация).

📣 Code Ready | #практика