쓰로틀링은 지정된 시간 동안 한번만 이벤트 핸들러나 콜백 함수를 호출하는 기능이다. 이 기법은 주로 과도한 요청을 제한하고자 할 때 사용된다. 예를들어 스크롤 이벤트나 마우스 이동 이벤트에 쓰로틀링을 적용하여, 과도한 리소스 사용을 줄이면서도 사용자의 동작을 정확하게 감지 할 수 있다.
// 예시
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
// 사용 예:
const throttledRequest = throttle(() => console.log('API Request'), 250); document.querySelector('input').addEventListener('input', throttledRequest);
위의 예시에서 throttle
함수는 주어진 limit
시간 동안 한 번만 호출되도록 지정된 함수(func
)를 쓰로틀링합니다. 따라서 throttledRequest
함수는 250ms 동안 최대 한 번만 'API Request'를 콘솔에 출력합니다.