디바운스(Debounce) 란?

이벤트가 연속으로 발생할 때, 마지막 이벤트가 발생한 뒤 일정 시간 동안 추가 이벤트가 없으면,
딱 한 번 실행하는 기법이다.

 

정의가 굉장히 추상적이다. 쉽게 생각해보자.

검색창에 apple을 검색하는 상황을 떠올려보자.

 

디바운스가 없는 경우

// API 요청 발생
a

// API 요청 발생(p를 입력해서)
ap

// API 요청 발생(p를 입력해서)
app

// API 요청 발생(l를 입력해서)
appl

사용자는 그냥 apple을 검색하고 싶은데, 글자 하나씩 입력할 때마다 디바운스가 없다면, 서버를 호출해야한다.

 

디바운스가 있는 경우(디바운스 300ms)

사용자가 입력을 끝낸 것 같을 때 실행하는 것이다

// 300ms 타이머 시작 -> 300ms 동안 입력이 없다면 API 요청 발생
a

// 300ms 이전에 입력이 들어왔다면, 타이머를 재시각(300ms)로 -> 300ms 동안 입력이 없다면 API 요청 발생
ap

.
.
.

// 최종적으로 300ms 동안 추가 입력이 없다면 -> API 요청 1번
apple

---

경험하기

index.html을 생성해서 작성하고, Live Server를 실행해보자

<!DOCTYPE html>
<html>
<body>
  <input id="search" placeholder="검색어 입력">

  <script>
    const search = document.querySelector("#search");

    let timer;

    search.addEventListener("input", (e) => {
      console.log("입력 이벤트 발생:", e.target.value);

      clearTimeout(timer);

      timer = setTimeout(() => {
        console.log("🔥 실제 작업 실행:", e.target.value);
      }, 1000);
    });
  </script>
</body>
</html>

 

실행하면 input 필드를 확인할 수 있고, 여기에 검색어를 입력해보자

 

개발자모드의 console을 확인하지, 입력 이벤트는 여러 번 발생하지만, 실제 작업 실행은 디바운스 1000ms가 적용되어 1000ms동안 입력이 없을 경우, 이벤트가 1회 실행되는 것을 확인할 수 있었다.