[JS] 디바운싱과 쓰로틀링(1): 디바운싱(debouncing)의 이해와 적용

 

목차

 

1. 디바운싱?

디바운싱(debouncing)은 컴퓨터 프로그래밍에서 사용되는 최적화 기법으로, 특정 시간 동안 함수의 실행을 지연시키는 프로세스를 말한다. 주로 이벤트 핸들러에서 사용되며, 빈번하게 발생하는 이벤트의 처리 횟수를 제한하는 데 효과적이다.

 

2. 어원

"디바운스(debounce)"라는 용어는 원래 전자공학 분야에서 유래했다. 물리적 스위치나 릴레이에서 접점이 열리거나 닫힐 때 발생하는 일시적인 신호 변동(바운싱)을 제거하는 과정을 의미했다. 소프트웨어 엔지니어링에서는 이 개념을 차용하여 급격히 발생하는 이벤트들을 "부드럽게" 만드는 기술을 지칭하게 되었다.

 

3. 작동 원리

디바운싱의 기본 원리는 다음과 같다:

1. 이벤트 발생 시 타이머를 설정.
2. 설정 시간 내에 신규 이벤트 발생 O => 기존 타이머 취소 & 신규 타이머 시작.
3. 설정 시간 내에 신규 이벤트 발생 X => 지정된 함수 실행.

이를 통해 연속적으로 발생하는 이벤트들 중 마지막 이벤트만을 처리하게 된다.

 

 

4. 응용 분야

디바운싱은 다양한 상황에서 유용하게 사용된다:

• 검색 기능: 사용자가 검색어를 입력할 때마다 API 요청을 보내는 대신, 입력이 잠시 멈췄을 때 요청을 보낸다.
• 윈도우 리사이징: 브라우저 창 크기 조절 시 레이아웃을 지속적으로 재계산하는 대신, 크기 조절이 완료되었을 때 한 번만 처리한다.
• 자동 저장: 문서 편집 중 매 키 입력마다 저장하는 대신, 일정 시간 동안 입력이 없을 때 저장을 수행한다.

 

5. 구현 예시

JavaScript에서의 간단한 디바운스 함수 구현:

<input type="text" id="searchInput" placeholder="Type something...">
<script>
  const debounce = (func, wait) => {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => func(...args), wait);
    };
  };

  document.getElementById('searchInput').addEventListener(
    'input', 
    debounce(event => console.log('User input:', event.target.value), 500)
  );
</script>

 

 

 

6. 기억하기

디바운싱: 이벤트가 잠잠해지면 함수 실행

쓰로틀링: 지정시간에 한 번씩만 함수 실행