자바스크립트 디바운스와 쓰로틀링

자바스크립트 디바운스와 쓰로틀링

참고: https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

내용

디바운스, 쓰로틀링 둘 모두 웹에서 연속적으로 발생되는 이벤트를 제어하여 성능을 향상시키는 기법이다.

차이점으로는 디바운스는 마지막으로 실행된 이벤트에 딱 한 번만 반응하고 쓰로틀링은 정해놓은 주기마다 실행이 된다는 점이다.

디바운스는 주로 API 호출 등에 사용되고, 쓰로틀링은 resize나 scroll 이벤트 등에 많이 사용된다.

디바운스

1. 타이머가 있는지 없는지 판별할 변수를 하나 생성한다. (timer)
2. 코드를 실행할 대기 시간을 정한다. (예시에서는 200ms)
3. input 이벤트가 발생하면 타이머가 설정된다.
4. 타이머가 이미 있는 상태에서 또 다시 이벤트가 발생한다면, 기존의 타이머는 clear 해주고 새로 타임아웃을 지정한다.

let timer = null;

document.querySelector('#input').addEventListener('input', () => {
  // 타이머가 이미 존재하면 이전 타이머는 제거한다.
  if (timer) {
    clearTimeout(timer);
  }

  timer = setTimeout(function() {
    // 실행할 코드
  }, 200);
});

쓰로틀링

1. 타이머 유무를 판별할 변수를 하나 선언한다.
2. 이미 타이머가 존재하면 아무 일도 없다.
3. 타이머가 없으면 새로 타이머를 생성하고, 이 타이머는 일정 시간이 지난 뒤 스스로를 해제하고 실행할 코드를 실행한다.

let timer = null;

document.querySelector('#input').addEventListener('input', function (e) {
  if (!timer) {
    timer = setTimeout(() => {
      timer = null;
      // 실행할 코드
    }, 200);
  }
});