[프로젝트 버그 수정] 쓰로틀링으로 클릭이벤트 제어하기

최근에 미니게임사이트 프로젝트에 두더지 게임을 추가해놓았다.
그러던 중 발견한 버그
두더지를 여러번 때리면 점수가 계속 올라감

클릭이벤트로 처리 해놓았으니 그럴 수 밖에..

• 쓰로틀링(throttling): 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• 디바운싱(debouncing): 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

위 기법들은 보통 성능 개선을 위해 사용된다. 하지만 그 외 이벤트 제어할 때도 유용하게 사용될 수 있다.

버그 해결을 위해 위의 두 기법을 바로 떠올렸는데,

• 디바운싱의 경우 사용자가 몇번의 이벤트를 발생시키든 일정 시간 후에 한번만 실행된다. 즉 지난 요청은 무시하고 가장 마지막에 들어욘 요청을 실행시킨다.
  -> 두더지를 잡자마자 함수가 실행되어야하는 두더지 게임에서는 적합하지 않다고 판단했다.

• 반면 쓰로틀링은 최초 요청에 의한 이벤트만 실행하고 이후 일정시간 동안은 이벤트를 무시한다.
  -> 쓰로틀링을 적용하여 유저가 두더지를 일정 간격 이내에 여러번 때렸을 때 한번만 이벤트핸들러가 실행되도록 수정하였다.

두더지가 나와있는 시간을 고려하여 delay를 1,000ms 로 설정하였고,
특정 두더지를 여러번 때리면 첫 클릭이벤트 이후의 클릭은 무시된다.
두더지 id로 다른 두더지와 구분을 하였다.

  const [throttle, setThrottle] = useState(false);
  const [throttlingMoleId, setThrottlingMoleId] = useState(-1);

  const throttledClickHandler = (moleColor: string, moleId: number) => {
    if (throttle && throttlingMoleId === moleId) {
      return;
    }
    setThrottle(true);
    setThrottlingMoleId(moleId);
    handleMoleClick(moleColor);

    setTimeout(() => {
      setThrottle(false);
      setThrottlingMoleId(-1);
    }, 1000);
  };