자바스크립트 디바운스(Debounce)란? 개념부터 직접 구현까지

디바운스(Debounce)는 함수가 실행될 수 있는 횟수를 제한하는 기법입니다. 즉, 짧은 시간 동안 같은 함수가 여러 번 호출되더라도 마지막 호출 이후 일정 시간이 지났을 때 한 번만 실행되도록 만들어 줍니다.

디바운스가 필요한 이유

대표적인 예로 자동완성 검색창을 들 수 있습니다. 사용자가 글자를 입력할 때마다 서버에 API 요청을 보내면 어떻게 될까요? 키를 누를 때마다 요청이 발생하기 때문에 불필요한 네트워크 트래픽과 메모리 낭비가 발생합니다.

이럴 때 디바운스를 적용하면, 정해진 시간 간격 동안의 호출을 하나로 묶어 처리할 수 있습니다. 즉, 사용자가 입력을 멈춘 뒤 일정 시간이 지나야 실제 API 요청이 전송되도록 제한할 수 있습니다.

디바운스 함수 직접 구현하기

아래와 같이 원하는 함수를 인자로 받아, 호출 빈도를 제한(throttle)된 방식으로 실행해 주는 디바운스 함수를 직접 작성할 수 있습니다.

const debounce = (cb, time) => {
    let timeout;
    return function() {
        const wrapperFunc = () => cb.apply(this, arguments);
        clearTimeout(timeout);
        timeout = setTimeout(wrapperFunc, time);
    }
}

코드 설명

이 함수는 두 가지 인자를 받습니다.

• cb (callback): 실제로 실행하고 싶은 콜백 함수
• time: 함수가 호출되기까지 기다릴 시간 간격(밀리초)

동작 방식은 다음과 같습니다. 예를 들어 첫 번째 API 호출이 1ms에 발생했고, time 값을 250ms로 설정했다고 가정해 보겠습니다. 그렇다면 251ms가 되기 전까지는 이 함수가 몇 번이든 호출되더라도 새로운 API 요청은 발생하지 않습니다. 매번 clearTimeout으로 이전 타이머를 취소하고 새 타이머를 설정하기 때문입니다.

정리

디바운스는 검색 자동완성, 스크롤 이벤트, 창 크기 조절(resize)처럼 짧은 시간 안에 수많은 이벤트가 발생하는 상황에서 성능 최적화에 필수적인 패턴입니다. 위 코드를 활용하면 기존 함수 호출을 손쉽게 디바운스 방식으로 대체할 수 있습니다.