Debounce

이벤트가 연달아 발생할 때, 제일 처음 또는 마지막 이벤트일 때만 함수를 호출하는 방법

만약 키보드 이벤트가 발생할 때마다 API를 요청한다고 가정해보자.

“감”이라는 글자를 입력하는데 “ㄱ”, “가”, “감” 3번의 이벤트가 발생하게됩니다. 이러면 불필요한 이벤트까지 API 요청에 포함시키면 낭비이므로 이를 방지하기 위해 디바운스를 사용합니다.

1
2
3
4
5
6
7
8
9

var timer;
document.querySelector("#input").addEventListener("input", function (e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function () {
    console.log("여기에 ajax 요청", e.target.value);
  }, 200);
});

• 주로 키보드 입력 이벤트에 사용

Throttle

마지막 이벤트가 발생한 후 일정 시간이 지나기 전에 다시 호출되지 않도록 막는 방법

만약 스크롤이벤트가 발생했을 때, 처음에 스크롤 이벤트가 발생할 때, 함수를 호출하고 몇초동안은 이벤트가 발생해도 함수를 호출시키지 않는 방법이다.

1
2
3
4
5
6
7
8
9

var timer;
document.querySelector("#input").addEventListener("input", function (e) {
  if (!timer) {
    timer = setTimeout(function () {
      timer = null;
      console.log("여기에 ajax 요청", e.target.value);
    }, 200);
  }
});

• 주로 스크롤 이벤트에 사용

위와 같이 직접 구현하는 방법보다는 예외 사항을 처리하지 못할 경우도 있기때문에, _.debounce, _.throttle을 사용한다.

요즘은 토스에서도 해당 라이브러리를 지원하니 관심이 있으면 사용해보자.

토스 디바운스 라이브러리 바로가기

댓글 공유