🖋️ Throttle 과 Debounce 비교

Throttle

• 이벤트 발생 후 한번만 실행하고 일정 시간 동안 지연

• 함수가 지정된 기간 동안 최대 한번 호출

• 매우 자주 발생하는 이벤트를 처리하는데 유용
  (ex, scroll 혹은 resize)

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        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));
        }
    }
}

Debounce

• 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행

• 해당 이벤트 무한히 발생을 입력 받고 끝날때, 가장 마지막 이벤트 실행

• 함수를 실행하기 전에 마지막 이벤트 이후 기다려야 하는 시간을 지정

• 입력 필드 유효성 검사 및 검색 창 제안에 유용

function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(context, args), delay);
    };
}

// Usage
const validateInput = debounce(function() {
    console.log('Input validated');
}, 500); // 500 milliseconds

document.getElementById('textInput').addEventListener('input', validateInput);

(+ @) rAF

• 애니메이션에 사용되는 rAF 는 다음 다시 그리기에 호출될 함수 예약
• setTimeout 나 setInterval 과 달리 브라우저의 새로 고침 빈도와 동기화

function animate() {
   requestAnimationFrame(animate);
}
requestAnimationFrame(animate);