[다독다독] Throttling과 Debouncing

연이어 발생하는 이벤트에 의한 리소스 방지를 막기 위한 방법이다. 다독다독에서 무한스크롤을 사용하고 있는데 브라우저에서는 스크롤이 하단에 닿았을 때 한 번만 실행이 됐는데 모바일에선 두 세번씩 호출되는 현상이 발생했다.

(1) 스크롤이 바닥에 닿음
(2) 파라미터의 page를 1 증가시킴
(3) 파라미터의 page를 인자로 받는 useEffect 실행
(4) 새로운 page의 API 호출

위와 같은 로직으로 무한 스크롤을 구현했는데 3번째 과정에서 파라미터의 page가 두 세번씩 바뀌는 것으로 인식되면서 useEffect가 중복 실행되고 있었다.

쓰로틀링은 특정 텀을 두고 주기적으로만 콜백함수를 실행하는 방식으로 scroll 이벤트에 많이 쓰이고, 디바운싱은 연이은 호출을 하나로 퉁치는 방법으로 input에 대한 이벤트 리스너에 적용할 수 있다.

Throttling

이벤트에 의한 콜백을 일정 시간 뒤에 호출하는 방법이다. 콜백을 중복해서 요청하게 되는 스크롤 이벤트에 사용하기 적합하다. 쓰로틀링을 통해 특정 텀 안에 일어난 스크롤 이벤트를 단 1번만 요청하게끔 처리할 수 있다. 다독다독 무한스크롤에는 쓰로틀링을 적용했다.

//무한스크롤
let timeForThrottle;
const infiniteScroll = () => {
  if(!timeForThrottle){
      timeForThrottle=setTimeout(()=>{
        const scrollHeight = document.querySelector('.content').scrollHeight
        const scrollTop = document.querySelector('.content').scrollTop
        const clientHeight = document.querySelector('.content').clientHeight
        if (Math.ceil(scrollTop + clientHeight) >= scrollHeight && scrollTop != 0) {
          addPageNum()
        }
        timeForThrottle=null
      },100)
  }
}

Debouncing

쓰로틀링이 '텀시간'에 의해서 효율화가 이루어진다면 디바운싱은 '연속성'에 의해서 이루어진다. 예를 들어 사용자가 input에 값을 입력한다고 생각해보자. 디바운싱을 사용하여 효율화를 한다면 매 타이핑마다 이벤트를 요청하지 않고, 타이핑을 하다 연속성이 끊기는 순간(유의미한 단어가 입력된 순간) 단 1번만 요청하게끔 처리할 수 있다.

let timerForDebounce;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timerForDebounce) {
    clearTimeout(timerForDebounce);
  }
  timerForDebounce = setTimeout(function() {
      // 여기에 로직이 들어가면 된다.
  }, 2000);
});

참고자료
https://webclub.tistory.com/607
https://tillog.netlify.app/posts/throttling-debouncing