Throttling

Throttling

NOTE

Throttling은 일정 간격으로 함수 호출을 제한하는 기술입니다. 이벤트가 여러 번 발생해도 지정된 시간 간격마다 한 번만 함수를 실행하도록 하는 방식입니다. 예를 들어, 사용자가 스크롤을 할 때마다 스크롤 이벤트가 발생하지만, throttling을 사용하면 지정된 시간 간격마다 스크롤 이벤트에 대해 처리할 수 있게 됩니다.

• 동작 원리: 이벤트가 연속적으로 발생하더라도, 일정한 시간 간격마다만 함수를 실행하도록 제한합니다.

• 사용 예시:

  • 사용자가 페이지를 스크롤할 때마다 위치를 기록하거나 화면을 갱신할 때, 과도한 이벤트 처리를 막기 위해 사용

  • 윈도우 리사이징 시 성능 최적화를 위해 사용

function throttle(func, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastTime >= delay) {
            func(...args);
            lastTime = now;
        }
    };
}
 
window.addEventListener('scroll', throttle(function() {
    console.log('스크롤 이벤트 처리');
}, 1000));