Обработка событий

Зачастую при обработке таких событий как: scroll, click, keyup и т.д. возникает необходимость обрабатывать не каждое событие, а только последнее.

В каких случаях необходимо?

• Подряд возникает несколько событий с одинаковым типом

• Нет необходимости в получении результата обработки промежуточных событий

• Обработка занимает длительное время

Пример №1

Пользователь изменяет количество товара в корзине интернет-магазина

Как мы видим, пересчет корзины происходит не при каждом изменении количества товара, а только после прекращения кликов.

Пересчет происходит на сервере, поэтому нет смысла тратить серверные ресурсы на промежуточные пересчеты, которые устареют за время выполнения XHR-запросов.

Если бы пересчет был моментальный, то пользователь наблюдал бы мельтешащие цифры.

Где еще может пригодиться такое поведение?

• Отображение многоуровневых меню по наведению курсора мыши
• Выпадающие подсказки для строки поиска
• Применение фильтров в каталогах
• и много других случаев

Как реализовать?

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

Для реализации пригодятся таймеры.

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

Обычная обработка события

document.addEventListener('click', () => {
    console.log('clicked')
})

Отложенная обработка через таймер

let timer = null
document.addEventListener('click', () => {
    if(timer) window.clearTimeout(timer)
    
    timer = window.setTimeout(() => {
        console.log('clicked')
    }, 1000)
})

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

Минусы приведенного примера

Универсальная функция

function debounce(func, time) {
  let iTimeout = null
  return (...args) => {
    if(iTimeout) {
      window.clearTimeout(iTimeout)
    }
    iTimeout = window.setTimeout(() => {
      func(...args)
      iTimeout = null
    }, time)
  }
}

const onClickDebounced = debounce(() => {
  console.log('clicked')
}, 1000)
document.addEventListener('click', onClickDebounced)

Хорошая реализация функции debounce включена в библиотеку Lodash