🛠️ 처음부터 만드는 Debounce — 마지막 입력 후 일정 시간 뒤에만 실행하기

Debounce는 빠르게 반복되는 이벤트를 무시하고, 마지막 이벤트만 일정 시간 뒤에 실행하는 패턴입니다.

Throttle과의 차이

Throttle: 일정 시간마다 최대 1회 실행 (시간 기반)

Debounce: 마지막 호출 후 시간 경과 시 실행 (대기 기반)

검색창에서 Debounce는 사용자가 입력을 멈춘 후 검색을 시작하고, Throttle은 입력 중에도 주기적으로 검색 결과를 보여줍니다.

10줄 구현

```typescript
function debounce any>(
fn: T,
delay: number
): (...args: Parameters) => void {
let timeout: NodeJS.Timeout;

return function (...args: Parameters) {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
```

실제 사용 예

```typescript
// 검색창 — 입력 멈춘 후 300ms뒤 API 호출
const handleSearch = debounce(async (query: string) => {
const results = await fetch(`/api/search?q=${query}`);
displayResults(results);
}, 300);
input.addEventListener('input', (e) => {
handleSearch((e.target as HTMLInputElement).value);
});
// 윈도우 리사이즈 — 리사이즈 멈춘 후 처리
const handleResize = debounce(() => {
console.log('새 크기:', window.innerWidth);
}, 500);
window.addEventListener('resize', handleResize);
```

언제 쓰나?

검색 입력 (자동완성, API 호출)

윈도우 리사이즈

폼 유효성 검사

자동 저장

공식 문서: [MDN setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)