throttle과 debounce 사용하기

상황 : 투표하기를 여러 번 클릭 시 아직 요청 결과 값을 받지 않았는데, 여러 번 api요청이 되므로 이미 선택했다는 팝업이 뜸

해결 : 제일 첫번째 요청만 수행되도록 하는 throttle 처리

 

 

💫 debounce와 throttle에 대해 알아보자

 

debounce, throttle은 자바스크립트 기능이 아닌 프로그래밍 방식이다. 과도한 이벤트 처리 또는 api 요청을 방지하는 기능으로 일정 시간 이후 또는 일정 시간 동안 한번의 작업이 이루어진다.

• debounce는 사용자 입력이 모두 끝난 후 일정 시간 후에 요청이 일어난다.
• throttle은 일정 간격 동안 한번의 요청이 일어난다.

이런 기능들은 보통 자동 완성이나 스크롤 이벤트 등에서 사용된다.

• 자동 완성에서 debounce를 사용할 경우, 검색어를 쭉 입력한다면 검색어를 모두 입력하고 나서야 자동 완성이 뜰 것이다. throttle에서는 검색어를 쭉 입력하다가도 중간 중간 자동 완성이 뜰 것이다.
• 스크롤 이벤트에서 debounce가 더 적합한 경우는 스크롤이 멈췄을 경우 요청을 구현하고 싶을 때(무한 스크롤)이고, throttle이 더 적합한 경우는 스크롤 중에 실시간으로 반응되어야 하는 걸 구현하고 싶을 때이다.

 

🔧 throttle을 사용하여 여러번 클릭 시도 시 한번만 요청되도록 만들자

import { useRef } from 'react';

const BOUNCE_RATE = 1000;

export default () => {
  const busy = useRef(false);

  const debounce = async (callback: () => void) => {
  // 1초뒤 수행하는 예약만
    setTimeout(() => {
      busy.current = false;
    }, BOUNCE_RATE);

// setTimeout보다 먼저 수행
    if (!busy.current) {
      busy.current = true;
      callback();
    }
  };

  return { debounce };
};

 

만약 1초 전에 요청이 하나 더 들어온다면 busy.current 는 true이므로 callback을 수행하지 못하고,

1초 이후에(setTimeout)는 false로 바뀌므로 새로운 요청이 왔을 때 수행 가능하다.

 

.

 

나는 이 코드가 debounce인줄 알았다. 그런데 디바운스는 그냥 setTimeout으로 callback을 처리했을 때의 경우이고, 스로틀은 busy의 상태에 따라 callback을 수행하게 만드는 것이 키 포인트..! 제일 마지막 입력이 요청되는 것보다 제일 첫 입력이 요청되는 것 throttle 이 더 알맞은 방법인 것 같다.