Debounce와 Throttle이란

사진: Unsplash 의 Samuel-Elias Nadler

 

프론트엔드 개발자 실무 면접에 자주 등장하곤 하는 두 개념이다. 작업을 의도적으로 지연시킨다는 점에서는 동일하다. 쓰로틀은 일정한 시간 간격을 두고 정기적으로 함수를 실행하고, 디바운스는 사용자가 함수 실행을 여러 번 할 때 대기했다 마지막 함수만 실행하는 걸 말한다. 나는 주로 lodash를 사용해 구현했는데, lodash는 사용하지 않는 추세다 보니(유지보수, 무거움 문제) 앞으로 직접 구현하면 좋을 듯하다.

 

Debounce

검색 박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭의 제거가 모두 debounce를 이용하는 사례다.

 

function debounce(callback, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback.apply(this, arguments);
    }, delay);
  };
}

 

 

*this란 함수를 호출한 객체다. (https://youtu.be/j6VkGimAs-E?si=QAgIoZ6IaKPyoErC 참고)

 

반환된 함수를 여러 번 연속 호출하면, 호출할 때마다 이전 예약을 취소하고 새로 delay 후 실행 예약을 걸어서, 마지막 호출만 살아남아 delay 후에 callback이 실행된다.

 

Throttle

원래는 장애물을 이용해 유체의 흐름 속도를 늦춘다는 의미로 쓰였다. 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아서, 한번씩 출력하는 형태다. 무한스크롤에 주로 사용한다. 사용자가 “멈춘 뒤 반응”이 아니라 스크롤하는 도중에도 자연스럽게 콘텐츠가 이어서 로딩되길 기대하기 때문이다.

 

function throttle(callback, delay) {
  let timer;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        callback.apply(this, arguments);
      }, delay);
    }
  };
}

 

디바운스와 비슷하게 보이지만, 반환된 함수가 여러 번 호출되더라도, 처음 호출된 시점에만 실행을 예약하고 이후 delay 시간 동안의 추가 호출은 모두 무시하여, callback이 최대 delay마다 한 번만 실행되도록 하는 함수다. 그러니까 디바운스는 항상 마지막 호출 시간 + delay 시간 만큼 지났다가 호출되지만, 쓰로틀은 항상 일정한 시간마다 실행되는 것이다.