Встречается на собеседованиях • сегодня

Как сделать чтобы не было сбоев при большом количестве навешанных обработчиков

Для оптимизации большого количества обработчиков:

Делегирование событий - вешаем один обработчик на родителя вместо множества на дочерние элементы:

document.querySelector('.parent').addEventListener('click', (e) => {
  if (e.target.matches('.child')) {
    // обработка клика
  }
});

Троттлинг/дебаунсинг для частых событий (scroll, resize):

function debounce(fn, delay) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}
window.addEventListener('resize', debounce(handler, 200));

Удаление неиспользуемых обработчиков:

// При unmount компонента
element.removeEventListener('click', handler);

Использование пассивных обработчиков для скролла:

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

Оптимизация через requestAnimationFrame для анимаций.

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы