함수의 호출을 간격을 제한하는 쓰로틀(Throttle)

쓰로틀이란?

어떠한 동작을 할 때마다 이벤트가 실행되도록 바인딩 되어있는 상황에서, 너무 잦은 이벤트의 호출은 프로그램의 성능을 떨어뜨리고 나쁜 유저 경험을 제공할 수 있습니다. 이를 해결할 수 있는 방법으로 바인딩 되어있는 이벤트가 최소한의 시간 간격을 갖고 실행되도록 제한하는 절차가 있는데, 이러한 기법을 쓰로틀(Throttle) 이라고 합니다.

 

개념

실행할 함수를 래핑하는 쓰로틀 함수를 만들고, 이 함수가 일정한 시간마다 실행되도록 setTimeout을 적용합니다. 정해준 주기에 한 번씩만 실행될 수 있도록 setTimeout 내부에서 플래그 변수를 제어해줍니다. 이렇게 되면, setTimeout 내부가 실행되면 플래그 변수의 상태가 변해 인자로 받게되는 함수(원래 이벤트에 바인딩 되었던 함수)가 있던 분기로 빠지지 않게 되고, 결과적으로 정해진 주기동안 함수가 한 번만 호출 될 수 있게 됩니다.

 

 

구현 방법

기본적인 구현 방법은 다음과 같습니다.

 

1. 함수가 실행되었는지 확인하는 플래그 역할의 변수(throttle)를 선언합니다.

let throttle;

 

2. 이 변수의 상태에 따라 함수가 실행되도록 구성해줍니다.

if (!throttle) {
  callback();
}

 

3. 함수 실행시, 플래그 변수의 상태를 변경해줍니다.

throttle = setTimeout(() => {
  throttle = null;
  callback();
}, 1000);

 

4. 하나의 함수로 만들어 주면 이런 모습입니다.

let throttle;

const throttleFunction = (callback) => {  
  return () => {
    if (!throttle) {
      throttle = setTimeout(() => {
        throttle = null;
        callback();
      }, 1000);
    }
  };
};

throttleFunction(실행할 함수);

 

5. 만약 전역변수를 사용하고 싶지 않다면, 클로저와 빠른 리턴을 이용하여 이렇게도 만들 수 있습니다.

const throttleFunction = (callback) => {
  let throttle;

  return () => {
    if (throttle) return;

    throttle = setTimeout(() => {
      throttle = null;
      callback();
    }, 1000);
  };
};

throttleFunction(사용할 함수);

 

 

정리

쓰로틀은 그 특성 때문에 서버에 요청을 보내는 함수나, 스크롤 함수에 많이 사용됩니다. 이 외에도 상황에 따라 다양하게 응용할 수 있으니 성능상의 문제가 예상된다면 고려해보시면 좋겠습니다.

 

같이 보면 좋은 키워드: 디바운싱(Debouncing)