디바운스(Debounce)와 쓰로틀링(Throttle) 예제

성능상의 문제로, 다음 2가지 방법을 사용하기도 한다.

 

쓰로틀링 : 일정 시간 간격으로 실행됨. 해당 시간 보다 짧게 발생한 것들은 무시하되 그 중 최종 발생했던 것만 기억해서 그것을 실행한다.

function throttle(func, ms) {

    let isThrottled = false,
        savedArgs,
        savedThis;

    function wrapper() {

        if (isThrottled) {
            savedArgs = arguments;
            savedThis = this;
            return;
        }

        func.apply(this, arguments);

        isThrottled = true;

        setTimeout(function () {
            isThrottled = false;
            if (savedArgs) {
                wrapper.apply(savedThis, savedArgs);
                savedArgs = savedThis = null;
            }
        }, ms);
    }

    return wrapper;
}

function f(asb) {
    alert(asb)
}

var tests = throttle(f, 1000);

tests('1a'); // 초기 무조건 발생
tests('1b'); // 아래 '1c' 값으로 저장되어 무시함.
tests('1c'); // 1초 후 발생
setTimeout(() => { tests('1d') }, 1100); // 위 함수 실행되고 100ms에 발생해서 일단 값 저장 후 1초 후 발생
setTimeout(() => { tests('1e') }, 2100); // 정확히 발생
setTimeout(() => { tests('1f') }, 3100); // 정확히 발생

 

디바운스 : 일정 시간 이후에 실행됨. 해당 시간 보다 짧게 발생한 것은 모두 무시함.

let temp = '';
let test = debounce(f, 1000);

function debounce(func, ms) {
    let timeout;
    return function (...arguments) {
        temp += arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), ms);
    };
}

function f() {
    alert(temp);
}

setTimeout(() => { test('a'); }, 10);   // 무시(1000ms 이내에 아래 함수가 실행)
setTimeout(() => { test('b'); }, 100);  // 발생(100ms 이후 부터 1000ms 이내에 실행되는 함수 없음)
setTimeout(() => { test('c'); }, 1200); // 무시(1000ms 이내에 아래 함수가 실행)
setTimeout(() => { test('d'); }, 1400); // 무시(1000ms 이내에 아래 함수가 실행)
setTimeout(() => { test('e'); }, 2500); // 발생(2500ms 이후 부터 1000ms 이내에 실행되는 함수 없음)