keyboard 이벤트, 디바운스(Debounce), 스로틀(Throttle)

• 스로틀(Throttle)은 디바운스와 유사하지만, 특정 시간 동안 이벤트가 여러 번 발생하더라도 일정한 간격으로 이벤트를 처리하는 기법입니다. 디바운스는 이벤트가 끝난 후에 한 번 실행되는 반면, 스로틀은 일정 시간 간격마다 이벤트를 실행한다는 차이점이 있습니다.

스로틀의 주요 목적

• 이벤트가 매우 빈번하게 발생할 때마다 처리를 하지 않고, 성능을 최적화하기 위해 일정 시간 간격으로만 처리합니다.

• 서버나 자원에 대한 부하를 줄이는 역할을 합니다.

스로틀 구현 예시

function throttle(func, limit) {
    let lastFunc;
    let lastRan;

    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if (Date.now() - lastRan >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

• func: 실행할 함수.

• limit: 함수가 실행될 최소 시간 간격(밀리초 단위).

• lastRan: 마지막으로 함수가 실행된 시간을 기록하여, 일정 시간 간격을 유지합니다.

스로틀 사용 예시

// 서버로 요청을 보내는 함수
function handleScroll() {
    console.log('Scroll event handled!');
}

// 스로틀 적용 (200ms 간격으로만 실행)
const throttledScroll = throttle(handleScroll, 200);

// 스크롤 이벤트 처리
window.addEventListener('scroll', throttledScroll);

동작 설명

1. 사용자가 스크롤을 할 때마다 scroll 이벤트가 발생합니다.

2. 이벤트가 발생할 때마다 throttledScroll 함수가 호출됩니다. 이 함수는 스로틀에 의해 200ms 간격으로만 실제 handleScroll 함수가 실행됩니다.

3. 즉, 스크롤이 계속 발생하더라도 200ms마다 한 번씩만 handleScroll 함수가 실행됩니다.

스로틀과 디바운스의 차이점

1. 디바운스(Debounce):
• 이벤트가 끝난 후 일정 시간 동안 이벤트가 발생하지 않으면 한 번 실행됩니다.
• 주로 실시간 검색과 같이 입력이 끝난 후 서버 요청을 처리하는 경우에 사용됩니다.

2. 스로틀(Throttle):
• 이벤트가 계속 발생해도 일정한 간격으로 실행됩니다.
• 주로 스크롤, 리사이즈 이벤트처럼 매우 빈번하게 발생하는 이벤트에서 성능을 최적화할 때 사용됩니다.

예시: 스로틀을 적용한 스크롤 이벤트

<div style="height: 1500px; background-color: lightgrey;">
    Scroll to see throttled event in action.
</div>

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if (Date.now() - lastRan >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

function handleScroll() {
    console.log('Scroll event handled at', Date.now());
}

const throttledScroll = throttle(handleScroll, 500);

window.addEventListener('scroll', throttledScroll);

동작 설명

1. 사용자가 페이지를 스크롤할 때마다 스크롤 이벤트가 발생하지만, throttledScroll 함수는 500ms마다 한 번씩만 handleScroll 함수를 실행합니다.

2. 이렇게 하면 스크롤 이벤트가 매우 빠르게 발생하더라도, 불필요한 함수 호출을 방지하고 성능을 최적화할 수 있습니다.

스로틀을 사용하는 이유

• 빈번한 이벤트 처리 방지: 사용자가 스크롤하거나 창을 리사이즈하는 것처럼 이벤트가 매우 빈번하게 발생할 경우, 이를 모두 처리하지 않고 일정 시간 간격으로만 처리하여 성능을 높일 수 있습니다.

• UI 성능 최적화: 부드러운 사용자 경험을 유지하면서 리소스 사용을 줄이는 데 도움을 줍니다.

스로틀과 디바운스 비교

• 디바운스는 연속적인 이벤트가 발생할 때 이벤트가 끝난 후에 한 번 실행됩니다.

• 스로틀은 연속적인 이벤트가 발생할 때 일정 시간 간격마다 실행됩니다.