직접 구현하며 느낀 Debounce 와 Throttle 차이

📌  Debounce ? Throttle ?  공부하게 된 이유

 

resize 이벤트 핸들러를 통해 화면의 사이즈 변경을 감지하고

그에 따라 화면의 애니메이션을 변경해야하는 기능이 있었다.

그런데 정말로 화면 크기가 바뀔 때마다 매번 이벤트가 호출되는 걸 보고

리페인트 비용 낭비가 예상되었다.

마우스로 요리조리 변경할 때마다 이벤트를 호출하는 게 아니라

변경이 끝난 후 화면 사이즈가 고정되었을 때 한번만 호출하도록 수정하고 싶었다.

최적화 방법 중 일부인, Debounce 와 Throttle 을 공부해보자.

 

Debounce 와 Throttle 모두 함수의 연속적인 실행을 제한하는 목적을 가지고 설계되었다.

 

 

📍  Debounce

요청이 들어온 뒤, 일정 시간을 기다린 후 요청을 수행한다.
일정 시간 내에 같은 요청이 추가로 들어오면 이전 요청은 취소된다.

 

const debounce = (func, timeout = 300) => {
  let timerID;
  return (...args) => {
    clearTimeout(timerID);
    timerID = setTimeout(() => {
      func(...args);
    }, timeout);
  };
};

 

코드를 보면, 내가 실행시키고 싶은 함수와 일정 시간을 차례로 입력받는다.

timer 변수는 setTimeout 함수를 연속해서 할당받는다.

clearTimeout 은 setTimeout 비동기 함수의 호출을 취소하는 역할을 한다.

 

일정 시간 내에 debounce 함수를 계속 호출했을 때, 

timerID 변수에 계속 새로운 setTimeout 함수가 할당된다.

일정 시간이 지나고 timerID 가 더 이상 초기화되지 않을 때,
그제서야 setTimeout 내 비동기 함수가 실행된다.

이때 인자로 받은 함수가 호출된다. (1번)

 

조금 더 자세히 설명하자면,

setTimeout 을 호출하면 Timer Identifier (타이머 식별자) 가 반환된다.

(timerID 변수에 실제로 담겨있는 값)

그래서 clearTimeout(타이머 식별자) 를 호출했을 때 

setTimeout 내 비동기 함수의 실행을 취소할 수 있다.

 

 

✅ Trailing vs Leading

 

https://llu.is/throttle-and-debounce-visualized

함수가 나중에 실행되는지, 처음에 실행되는지 여부에 따라 Debounce 를 구분할 수도 있다.

 

1️⃣ Trailing Debounce

 

const debounce = (func, timeout = 300) => {
  let timerID;
  return (...args) => {
    clearTimeout(timerID);
    timerID = setTimeout(() => {
      func(...args);
    }, timeout);
  };
};

 

위 코드와 동일하다.

매번 이벤트가 발생할 때마다 지정한 timeout 만큼 기다리기 때문에

마지막에 발생한 이벤트도 일정 시간 기다린 만큼 실행된다.

 

2️⃣ Leading Debounce

 

const debounce = (func, timeout = 300) => {
  let timerID;
  return (...args) => {
  	if (!timerID) {
    	func(...args);
    }
    clearTimeout(timerID);
    timerID = setTimeout(() => {
      timerID = undefined;
    }, timeout);
  };
};

 

이벤트 발생시 처음 함수가 호출되고 이후의 함수 호출은 모두 무시한다.

 

 

📍  Throttle

일정 시간 동안 요청이 한 번만 수행한다.

 

 

 

 

Devounce vs Throttle visualization

디바운싱과 트로틀링 시각화를 잘 해놓은 블로그가 있어 첨부한다.