디바운싱과 스로틀링

💻 디바운싱

디바운싱은 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정시간이 경과한 이후에 이벤트 헨들러가 한 번만 호출되도록 합니다. 즉 짧은 시간 간격으로 발생하는 이벤트 핸들러를 그룹화해 마지막에 한 번만 이벤트 핸들러가 호출되도록 하는 기법입니다.

<div>
  <input class="normal-input"/>
  <span class="normal"></span>
</div>

<div>
  <input class="debounce-input">
  <span class="debounce"></span>
</div>
<script>
  const $normalInput = document.querySelector('.normal-input')
  const $debounceInput = document.querySelector('.debounce-input')

  const $normalSpan = document.querySelector('.normal')
  const $debounceSpan = document.querySelector('.debounce')

  const debounce = (callback, delay) => {
    let timerId;
    return e => {
      if (timerId) clearTimeout(timerId)
      timerId = setTimeout(callback, delay, e)
    }
  }

  $normalInput.addEventListener('input', (e) => {
    $normalSpan.innerText = e.target.value
  })

  $debounceInput.addEventListener('input', debounce((e) => {
    $debounceSpan.innerText = e.target.value
  }, 500))
</script>

debounce함수가 반환한 함수는 debounce함수에 두 번째 인수로 전달한 시간보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정합니다.

💻 스로틀링

짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대한 한 번만 호출되도록 합니다. 즉 스로틀링은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만듭니다.

const throttle = (callback, delay) => {
  let timerId;
  return (e) => {
    if (timerId) return;
    timerId = setTimeout(() => {
      callback(e);
      timerId = null;
    }, delay)
  }
}

throttle함수가 반환한 함수는 throttle함수에 두 번째 인수로 전달한 시간이 경과하기 이전에 이벤트가 발생하면 아무것도 하지 않다가 시간이 경과했을때, 콜백 함수를 호출하고 새로운 타이머를 재설정 합니다. 따라서 delay시간 간격으로 콜백함수가 한번씩 호출됩니다.