Debouce, Throttle (디바운스, 쓰로틀)

2 min readOct 27, 2018

스크롤 리스너를 활용하여 코드를 작성하는 경우가 있다. 스크롤 리스너는 짧은 시간내에 다수의 이벤트를 발생시킨다. 만약 복잡도가 높은 함수가 포함될 경우 사용자의 화면이 느려지거나 정지하는 심각한 문제를 발생 킬수 있다. 이러한 경우 디바운싱(debouncing)와 쓰로틀링(throttling)을 활용한다면 문제를 개선 할수 있겠다.

디바운싱과 쓰로틀링은 특정 함수 그룹을 시간간격을 두어 호출 하면서 실행 하도록 하는 방법이다. 이는 스코프, 클로저, 타이밍 이벤트를 활용하여 구연 할수 있다.

function debounce(fn, delay) {
    let timer
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => { // *
            fn.apply(this, arguments);
        }, delay);
    }
}// * ES6 화살표 함수는 클로저 함수 안에서 debounce의 스코프와 변수에 접근 할수 있다.

디바운싱은 반복적으로 호출되는 함수 중 마지막 함수만 호출한다.

function throttle(fn, delay) {
    let timer
    return function() {
        if (!timer){
            timer = setTimeout(() => {
                timer = null
                fn.apply(this, arguments)
            }, delay)
        }
    }
}

쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전까지 다시 호출되지 않도록 한다.

function f1() {
    console.log(this)
    console.log(arguments)
}const app = document.getElementById('app')app.addEventListener('scroll', throttle(f1, 1000))
app.addEventListener('scroll', debounce(f1, 1000))

스크롤 영역에 리스너를 달아서 디바운싱과 쓰로틀링을 적용해보면 결과를 확인 할수 있다.

Lodash 라는 도구를 사용하게 되면 아래와 같이 간단히 구현 할 수도 있다.

_.debounce(f1, 1000)
_.throttle(f1, 1000)

Debouce, Throttle (디바운스, 쓰로틀)

Written by MNIII