디바운싱

짧은 시간 간격으로 발생하는 이벤트를 그룹화해서
마지막에 한 번만 이벤트 핸들러가 호출된다.

디바운싱 방법 2가지

1. 전역변수에 timerId 설정

<input type="text">
<div class="msg"></div>

<script>
  const $input = document.querySelector('input')
  const $msg = document.querySelector('.msg')

  let timerId 

  $input.oninput =  (e) =>{
    console.log('return ')
    if(timerId) clearTimeout(timerId)
        timerId = setTimeout(()=>{
          $msg.textContent = e.target.value
        },300)
  }
</script>

oninput 우항의 함수가 input이 바뀔때마다 실행되고
이를 통해 기존의 timerId가 존재한다면 clearTimeout으로 없애고 새로운 timerid에 setTimeout을 처리한 값을 부여한다.

2. debounce 함수 구현 및 지역변수에 timerId 설정

<input type="text">
<div class="msg"></div>

<script>
  const $input = document.querySelector('input')
    const $msg = document.querySelector('.msg')

  const debounce = (callback,delay) => {
    let timerId;
    console.log('timerId')

    return event => {
      console.log('return ')
      if(timerId) clearTimeout(timerId)
        timerId = setTimeout(callback,delay,event)
    }
  }

  $input.oninput = debounce(e=>{
    $msg.textContent = e.target.value
  },300)
</script>

해당 debounce 함수 자체는 딱 한번 실행되어 리턴한 것은 return 내의 함수이다.
즉, let timerId 를 한 부분은 단 한번만 실행된 것이고
onInput에 의해 변할때마다 진행하는 것은 debounce의 return된 함수 부분이다.

정리

둘다 결국 결과는 같지만 방법론적으로 timerId가 let 으로 선언되는 것은 공통적으로 1번만 되어야하는 것이다.

스로틀

일정 시간 간격으로 이벤트 핸들러가 최대 한번만 호출되도록 한다.

<input type="text">
<div class="msg"></div>

<script>
  const $input = document.querySelector('input')
    const $msg = document.querySelector('.msg')

  const debounce = (callback,delay) => {
    let timerId;
    console.log('timerId')

    return event => {
      console.log('return ',timerId)
      if(timerId) return
        timerId = setTimeout(()=>{
            callback(event);
            timerId = null;
            },delay)
    }
  }

  $input.oninput = debounce(e=>{
    $msg.textContent = e.target.value
  },1000)
</script>

input에는 어울리지않지만, 디바운싱과 비교해보자