💻 Dev

🛠️ 처음부터 만드는 Throttle — 연속 이벤트를 일정 시간마다 처리하기

Throttle은 Debounce와 자주 혼동되지만, 정반대로 작동합니다.
마지막 이벤트만 처리하는 Debounce와 달리, Throttle은 일정 시간 간격으로 계속 실행됩니다.

구현


```javascript
function throttle(fn, interval) {
let lastCall = 0;

return function(...args) {
const now = Date.now();
if (now - lastCall >= interval) {
lastCall = now;
fn(...args);
}
};
}
```

사용 예제


```javascript
const handleScroll = throttle(() => {
console.log('스크롤 위치 갱신');
}, 1000); // 1초마다 최대 1번 실행
window.addEventListener('scroll', handleScroll);
```
사용자가 빠르게 스크롤해도, 최대 1초에 1번만 로그가 찍힙니다.

Throttle vs Debounce


  • Throttle: 지속적으로 실행 (네트워크 요청, 영상 로딩 진행률)

  • Debounce: 마지막에만 실행 (검색창 자동완성, 폼 저장)

  • 모바일 에서도 `requestAnimationFrame`과 조합하면 60fps 제약을 지킬 수 있습니다.
    💬 0
    👁 0 views

    Comments (0)

    💬

    No comments yet.

    Be the first to comment!