쓰로틀링(throttling)

이전 포스트에서 이야기 했던 것과 마찬가지로 쓰로틀링에 대해 이야기하겠다!

---

쓰로틀링(throttling)

쓰로틀링은 이벤트가 짧은 시간에 많이 일어나는 현상을 방지하기 위해서 사용한다. 주로 스크롤 이벤트라던가... 이벤트가 짧은 시간에 많이 일어나게 되면 성능면에서 좋지않은 영향을 끼칠 수 있다. 이때 쓰로틀링을 적용하면 전에 이벤트가 많이 발생했더라도 한번 이벤트가 발생하면 정해진 시간만큼 지난 후 다시 일어나게 된다.

 

const [timer, setTimer] = useState(false);
   
const handleThrottle () => {
  if (!timer) {
    setTimer(true);
    setTimeout(() => {
      setTimer(false);
      console.log('스크롤!');
    }, 500);
  };
};

 

쓰로틀링도 디바운씽과 마찬기지로 setTimeout함수와 timer의 상태가 필요하다. 이번엔 디바운씽과 같이 setTimeout함수를 제거하고 다시 호출하는 것이 아니다. 아예 timer의 상태가 false일 경우에만 setTimeout함수가 호출되게 작성하여 setTimeout함수가 호출되어 있는 상태이면 setTimeout함수가 작동할수 없도록 코드를 짜주면 된다!