프론트엔드에서 서버 api 호출을 최소화하기 위한 디바운스 로직

클릭이 끝날 때까지 (마지막 클릭 후 0.5초가 지날 때까지) API 요청을 연기한다.

그 구현 방법은, 끊임 없는 타이머 클리어와 재설정.

// 5. 기존 타이머 클리어
const existingTimer = debounceTimers.get(timerId);
if (existingTimer) {
  clearTimeout(existingTimer);
}

// 6. 새로운 디바운스 타이머 설정 (500ms)
const timer = setTimeout(async () => {
  // ... (API 호출 및 동기화 로직)
}, 500);

• debounceTimers에 0.5초짜리 newTimer(timerId)를 생성해서 넣음.
• 버튼을 클릭할 때마다debounceTimers에 기존 타이머(existingTimer)가 아직 사라지지 않고 존재하면,
• clearTimeout(existingTimer)로 이전 타이머를 취소이전에 잡아둔 “500ms 뒤에 실행될 API 요청 예약”을 없앰
• 다시 setTimeout(…, 500)새롭게 500ms 후에 실행될 타이머를 세팅

“버튼을 누를 때마다 0.5초 타이머가 ‘다시 시작’된다.”

---

• 사용자가 연속 클릭 →클릭할 때마다 기존 타이머 취소(clearTimeout) 후 새 타이머 생성(setTimeout)
• 연속 클릭 끝나고 0.5초가 지나야 API가 딱 한 번 호출됨

[영상]