Javascript - debounce, throttle

프로젝트를 하다보면 settimeout을 쓰더라도 이벤트가 두번 발생하는 경우가 있었는데 이를 사용하면 해결될꺼같다.

보통 이 둘을 배울 때, 같이 배우는데 둘의 용도와 사용방법이 다르다. 우선 둘의 뜻을 알아보자

 

debounce : de-는 not을 뜻하며 bounce는 튀어오르다. 즉 못튀어오르게 막는걸 이야기한다.  자바스크립트에서의 디바운스는, 이벤트 발생이 많을 때 가장 마지막 이벤트만을 실행시킨다.

 

뜻 자체는 목을 조르다이다. 벨브를 조여서, 유체의 흐름을 제한하는 걸이야기한다. 자바스크립트에서의 쓰로틀은 이벤트 발생이 많을 때 특정 밀리세컨드 동안 이벤트를 차단하고 단 한번만 실행시킨다​​.

 

둘이 같은거 같지만 debounce는 시행횟수, throttle은 시간에 관련된 제어방법이라 보면좋다.

 

function debounce(callback, limit = 100) {
    let timeout
    return function(...args) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            callback.apply(this, args)
        }, limit)
    }
}

function throttle(callback, limit = 100) {
    let waiting = false
    return function() {
        if(!waiting) {
            callback.apply(this, arguments)
            waiting = true
            setTimeout(() => {
                waiting = false
            }, limit)
        }
    }
}​

 

두가지 function을 이용하면 되겠다.