디바운스(debounce)와 스로틀(throttle)의 차이점은 무엇인가요?

Question

Accepted Answer

둘 다 빠르게 반복되는 이벤트에 대응해 함수가 실행되는 빈도를 제한하지만, 타이밍 전략이 다릅니다.

- **디바운스(Debounce)**: 활동이 N ms 동안 **멈춘 후에만** 함수를 실행합니다. 호출될 때마다 타이머를 재설정합니다. → "끝날 때까지 기다린다."
- **스로틀(Throttle)**: 지속적인 활동 중에 **N ms마다 최대 한 번** 함수를 실행합니다. → "일정한 속도로 실행한다."

```text
이벤트:    x x x x x x x ........ x x x
디바운스:                 ↑ (멈춘 후 한 번 발생)
스로틀:    ↑     ↑     ↑           ↑     (주기적으로 발생)
```

## 디바운스 구현

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // 이전에 예약된 호출 취소
    timer = setTimeout(() => fn(...args), ms); // 새로 예약
  };
}
const search = debounce(q => api.search(q), 300); // 입력이 멈춘 후에만 검색
```

## 스로틀 구현

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // 최대 ms마다 한 번 실행
  };
}
```

## 무엇을 언제 사용할까

- **디바운스**: 입력 중 검색, 자동 저장, 리사이즈 종료, 사용자가 타이핑을 멈춘 후 검증 — *최종* 값을 원할 때.
- **스로틀**: 스크롤 핸들러, mousemove, 드래그, 속도 제한 — 동작이 진행되는 동안 *주기적인* 업데이트를 원할 때.

## 왜 중요한가

둘 다 비용이 큰 작업(API 호출, 레이아웃 재계산)을 초당 수백 번 실행하는 것을 방지하는데, 이는 핵심적인 프론트엔드 성능 기법입니다.

lodash 같은 라이브러리는 leading/trailing 옵션이 있는 견고한 버전을 제공합니다.