JS :: 디바운스(Debounce)와 스로틀링(Throttling)

 

예를 들어보자.

 

어떤 값을 입력할 때 해당 단어가 포함된 단어를 제공하는 기능을 구현하는 상황.

= 검색엔진 검색어 추천 결과 같은 기능.

이럴 때 글자가 변할 때마다, 어떤 function 이나 API를 호출하여야 하는데.. 너무 잦은 함수 호출이 일어난다.

 

물론 프론트엔드와 백엔드에서 성능 최적화가 되어 있으면 문제가 덜 일어날 수도 있으나..

그래도 만일의 문제를 제거해주는 것이 중요할 것이다.

 

이때 보통 디바운스 Debounce 와 쓰로틀링 Throttling 의 개념을 적용하게 되는데

이 두가지의 공통점과 차이점에 대해 적어보고자 한다.

 

공통점

 

디바운스와 쓰로틀링의 공통점은..

1. 함수가 너무 많이 호출되지 않도록 제어하는 테크닉의 종류이며,

2. 성능 최적화와 리소스 관리에 많이 사용되는 개념이다.

 

Debounce 디바운스

 

 

특정 시간 이후에 한번만 실행

지정된 Delay 안에 n번의 호출이 발생하는 경우 마지막 한번만 실행하도록 하는 방법.

 

기본적으로 함수 호출이 지연되는 개념. (디바운스 딜레이가 1초라면 1번만 클릭해도 1초 후에 실행되고, 1초 안에 100번을 클릭해도 100번째 클릭이 실행됨)

지정된 딜레이 이전에 호출을 요청하게 되면 이전 호출이 취소되는 것이다.

 

동작방식

1. 함수 호출이 디바운서를 트리거함

2. 디바운서는 지정된 기간 동안 타이머를 설정

3. 타이머를 끝까지 기다리기 전에 새로운 호출이 들어오면 타이머의 시간이 처음으로 초기화.

4. 타이머가 초기화되지 않고 끝까지 기다리면 함수가 호출.

 

사용 케이스

1. 검색어 자동완성: 사용자가 입력을 중단할 때까지 검색 결과에 대한 API 호출을 지연시킴

2. 양식 유효성 검사: 사용자가 데이터 입력을 다 마친 뒤에 유효성 검사를 시작하는 케이스 

3. API 호출 속도 제한: API 호출이 너무 잦은 경우 서버에 부하가가므로 디바운스로 호출을 제한. 유료 API를 호출하는 경우에 유용하게 사용됨.. ㅎㅎ;

4. 실수 방지: 은행 서비스의 경우 송금 요청 버튼을 실수로 두번 클릭해도 마지막 한 번에 대해서만 실제로 송금이 요청됨.

5. 블로그 글쓰기 에디터 자동저장 기능: 글 쓰다가 일정 시간동안 타이핑이 없으면 자동저장 func.이 돌게 됨.

 

예제

  // 디바운스 시간 지정
  let debounceTimer=1000;
  
  function debounce(func, delay) {
    return function(){
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(()=> func.apply(this, arguments), delay);
    }
  }

 

 

 

Throttling 쓰로틀링

 

일정한 간격으로 한번만 실행하기

함수가 호출되는 횟수와 상관없이 일정 간격으로 함수를 실행

 

딜레이를 주는 방식은 디바운스와 동일하지만 설정한 시간 내에 추가적인 함수 호출 요청을 무시함. 디바운스와 달리 딜레이 값을 초기화하지 않음.

딜레이가 끝나면 함수가 실행되는 방식

 

동작 방식

1. 함수 호출이 스로틀링을 트리거

2. 설정된 딜레이 내에 함수가 호출되지 않으면 함수가 실행됨

3. 딜레이 내 추가 호출은 무시

4. 딜레이 만료 시 호출이 실행되고 프로세스가 반복됨

 

사용 케이스

1. 무한 스크롤: 사용자가 스크롤을 내렸을 때 실행되지만, 스크롤로 인식된 모든 픽셀에 대해 요청을 보내지는 않음

2. 실시간 업데이트: 잦은 업데이트가 도움이 되지만, 즉각적이어서는 안되는 경우에 유용함.

 

예제

  let lastcall = 0;
  function throttle(func, delay) {
    return function (){
      const now = new Date().getTime();
      if(now-lastcall < dalay ) return;
      lastcall = now;
      return func.apply(this, arguments);
    }
  }

 

차이점

 

1. 실행 빈도

 -. 쓰로틀링은 일정 시간 안에 한번 실행된다는 보장이 있지만, 디바운스의 경우는 일정 시간동안 중복 호출이 없어야지만 실행이 됨

2. 사용자 피드백

 -. 쓰로틀링은 즉각적인 피드백을 제공해 스크롤과 같은 작업에 유용. 디바운싱은 UI의 반응성을 떨어트리지만 작업이 완료될 때까지 함수 호출을 방지하려는 경우에 유용.

3. 복잡성

 -. 쓰로틀링의 경우 일반적인 함수 호출만 제한하므로 구현하기가 더 쉬움.

 -. 디바운싱의 경우 타이머와 더 복잡한 로직이 필요.

 

그러므로...

 

시간에 민감한 작업은 쓰로틀링으로 처리하고,
시간에 민감하지 않은 작업은 디바운스로 처리하자!

 

 

 

번외로

Lodash 나 Rxjs 같은 라이브러리가 존재하므로 직접 구현하기가 꺼려진다면

위의 라이브러리에 대해 알아보는 것도 좋을 것 같음.