# JS - debounce() 함수 완전 정리

프론트엔드 개발하면서 디바운스 함수를 접해보신 적 있나요?

스크롤, 검색창 입력, 윈도우 리사이즈처럼 짧은 시간에 반복해서 호출되는 이벤트를 일정 시간 동안 모아서 한 번만 실행하도록 하는 기술입니다.

---

debounce()란?

일정 시간 동안 이벤트가 반복 발생해도, 마지막 호출만 실행되게 하는 함수 제어 기법

예를 들어, 검색창에 글자를 입력할 때마다 API를 호출하면 서버가 과부하가 걸릴 수 있어요.
이때 debounce()를 사용하면 입력이 멈춘 후 특정 시간(예: 300ms)이 지나면 딱 한 번 API를 호출하게 만들 수 있어요.

---

debounce()가 필요한 상황

다음과 같이 “너무 자주 실행되는 이벤트”에서 필요합니다. :

• 실시간 검색 API 호출
• 윈도우 리사이즈 이벤트
• 스크롤 이벤트(무한 스크롤, 스크롤 위치 저장 등)
• 입력 폼 자동 저장
• 버튼 중복 클릭 방지

---

debounce() 기본 동작 방식 요약

1. 이벤트가 발생하면 타이머를 초기화
2. 일정 시간 동안 추가 이벤트가 들어오면 기존 타이머 취소
3. 마지막 이벤트가 들어온 후 지정 시간 지난 뒤 실행

즉, "보다가 멈추면 실행" 구조!

---

가장 많이 쓰는 debounce 코드 

function debounce(func, delay) {
    let timer;

    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

 

사용 예제 1 — 검색창 API 호출 제어

const search = debounce(function (keyword) {
    console.log("API 호출:", keyword);
}, 300);

document.querySelector("#search").addEventListener("input", (e) => {
    search(e.target.value);
});

효과:
사용자가 빠르게 타이핑해도 API는 입력이 멈춘 후 단 한 번 실행됨.

---

사용 예제 2 — 스크롤 이벤트 최적화

function handleScroll() {
    console.log("스크롤 위치:", window.scrollY);
}

window.addEventListener("scroll", debounce(handleScroll, 200));

스크롤은 엄청나게 많이 실행되기 때문에 디바운스로 CPU 부담을 줄일 수 있습니다.

 

throttle과 debounce 차이

개념	동작	원리
debounce	입력이 멈춘 뒤 한 번 실행	검색창 입력
throttle	일정 간격마다 실행	스크롤 위치 계산

둘 다 이벤트 제어지만 목적과 타이밍이 다릅니다.

---

정리

• debounce()는 연속된 호출을 묶어서 마지막 호출만 실행한다.
• 타이핑, 스크롤, 리사이즈 등 이벤트 최적화에 필수.
• setTimeout을 이용해 간단히 구현 가능.
• throttle과의 차이까지 알아두면 더 확실!