[TIL] 스로틀과 디바운스

스로틀과 디바운싱

• my real hotel 사이드 프로젝트 중 스로틀과 디바운싱에 대해서 공부하게 되었다. 스로틀과 디바운싱은 둘다 Javascript에서 양이 많은 이벤트를 제어하는 방법이다.
• 스크롤링과 같은 이벤트는 호출이 매우 많다. 한번 휠을 돌리는 것만으로도 20번 이상의 이벤트가 호출 될 수 있다.
• 이벤트 핸들러 내부의 기능이 중복적으로, 여러번 호출 될 수가 있다.
• 유료 API를 사용할 경우, 이런 많은 호출은 많은 비용으로 이어질 수 있다.

---

스로틀 (Throttle)

• 이벤트를 일정한 주기마다 발생하여 실행 횟수를 제어한다. -> 정기적인 호출이 보장된다.
• 스로틀을 영어로 검색 해 보면 밸브의 한 종류가 나온다.
  • 밸브처럼 잠금으로서 함수가 재호출 되지 않도록 제어한다.
• 이벤트의 성능 문제에서 많이 사용한다.

• 스크롤링의 예시가 대표적이다.

• sample code

  js코드

  function throttle(fn, delay) {
    let timer;
    return function() {
        if (!timer){ //타이머가 없다면 셋팅
            timer = setTimeout(() => {
                timer = null //타이머 초기화
                fn.apply(this, arguments) //일정 시간 이후에 호출
            }, delay)
        }
    }}
  

---

디바운스 (Debounce)

• 특정 시간 이후, 맨 마지막 이벤트(혹은 맨 처음)만 호출
• 자동완성의 예시가 대표적이다.
  • 사용자가 입력하는 정보를 저장할 때, 모든 key stroke를 저장하게 되면 하나를 입력 할 때마다 핸들러가 호출이 된다.
  • ex)ㄱ 거 검 검ㅅ 검새 검색
  • 따라서 key down 이벤트가 생기고 몇 초 이후에 저장하는 함수를 호출하면 횟수가 크게 줄어들 것이다.

• sample code

  리액트 코드

    const [debouncedValue, setDebouncedValue] = useState(value);
  
    useEffect(() => {
      // delay 이후에 value 업데이트
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
  
      // 값이 바뀌면 타임아웃 재설정
      return () => {
        clearTimeout(handler);
      };
    },[value, delay] // value나 delay가 변경 되는 경우에만 호출
    );
  

  js 코드

  function debounce(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer); //호출 될때마다 타이머 초기화
        timer = setTimeout(() => {
            fn.apply(this, arguments); //일정 시간 이후 호출
        }, delay);
    }
  }