💻 오늘의 코드 팁 — 처음부터 만드는 Throttle

문제: 너무 빈번한 이벤트 처리

스크롤, 리사이즈, 마우스 무브 같은 이벤트는 매우 자주 발생합니다. 매번 핸들러를 실행하면 성능이 저하됩니다. 일정 시간마다 최대 1회만 실행하고 싶을 때 사용합니다.

코드

```javascript
function throttle(func, wait) {
let timeout = null;
let previous = 0;

return function(...args) {
const now = Date.now();
const remaining = wait - (now - previous);

if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(this, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = Date.now();
timeout = null;
func.apply(this, args);
}, remaining);
}
};
}
// 사용 예
const handleScroll = throttle(() => {
console.log('Scroll happened!');
}, 300); // 300ms마다 최대 1회
window.addEventListener('scroll', handleScroll);
```

어떻게 동작하나?

| 이름 | 역할 |
|------|------|
| `previous` | 마지막 함수 실행 시간 |
| `wait` | 최소 실행 간격(ms) |
| `remaining` | 다음 실행까지 남은 시간 |
흐름:
1. `remaining ≤ 0` → 즉시 실행 (충분한 시간 경과)
2. `remaining > 0` → 나머지 시간 대기 후 실행
3. 이미 예약되어 있으면 새 timeout 미생성

Throttle vs Debounce

| | Throttle | Debounce |
|---|----------|----------|
| 동작 | 주기적 실행 (매 300ms마다 최소 1회) | 마지막 이벤트 후 일정 시간 경과 시 1회 실행 |
| 사용처 | 스크롤, 리사이즈 (진행 중) | 검색 입력, 자동 저장 (완료 후) |
| 특징 | 균일한 간격 | 마지막 이벤트만 처리 |

실전 팁

```javascript
// 비용이 큰 작업 (API, 리렌더링)
const handleResize = throttle(() => {
recalculateLayout();
updateChart();
}, 500);
window.addEventListener('resize', handleResize);
// requestAnimationFrame과 조합 (부드러운 60fps)
const throttledScroll = throttle(() => {
requestAnimationFrame(handleScroll);
}, 16);
window.addEventListener('scroll', throttledScroll);
```

참고

[Lodash throttle](https://lodash.com/docs#throttle)

[MDN - requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)