[JavaScript] Debounce

책(Do it 리액트 프로그래밍 정석)에서 보기 전에는 이런 개념이 있다는 것도 모르고 살았었는데...

 

Debounce란 어떤 내용을 입력하다가 특정 시간동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버에 요청하는 방법이라고 하는데... 이 개념은 굳이 대상이 서버가 아니더라도 활용이 가능할 거 같다.

 

예를 들어, App에서 Data검색 쿼리를 날리는 경우에도 같은 방식을 적용할수 있을 거 같다.

검색 쿼리에 Debounce 개념이 적용되면 대용량의 DB를 실시간으로 검색하는 구조를 가진 앱의 경우 쿼리가 앱에 주는 부하를 축소시킬 수 있다는 생각이 든다.

 

아무튼 책에 나온 예시는 JavaScript이니 JavaScript형식의 코드를 공유하자면 아래와 같다. 조금만 변형하면 다른 환경에서도 적용이 가능할 거 같다.

export function debounce(func, delay) {
    let inDebounce;
    return function(...args) {
        if (inDebounce) {
            clearTimeout(inDebounce);
        }
        inDebounce = setTimeout(
            () => func(...args),
            delay
        )
    }
}

const logging = debounce(val => console.log(val), 100);

logging('a');
logging('b');
logging('c');

구조는 생각보다 간단하다. 함수가 호출되었을 때 Timer 객체인 indebounce가 선언되어있지않다면 함수 바로 실행.

indebounce가 선언되어있다면 이전에 이미 setTimeout이 호출된 이력이 있다는 뜻이므로 그 객체를 지우고 새롭게 delay를 초기화하는 함수를 호출하면 된다.

 

마지막의 logging함수 3개는 각각의 함수 사이에 호출이 100ms이상이 걸리지 않았다면 결과적으로 logging('c')가 호출된지 100ms이후에 'c'만 로깅되고 끝나게 된다.