2025-11-01 15:10
Tags: 웹
디바운싱 (Debouncing)
- 짧은 시간 안에 동일한 이벤트가 연속적으로 발생하는 것을 방지하여 마지막 이벤트 하나만 처리하는 기술
- “연속된 이벤트를 그룹화하여 마지막 이벤트 발생 후 일정 시간이 지날 때까지 기다렸다가 딱 한 번만 실행”
- 주로 사용자의 반복적인 입력(검색어 입력, 버튼 클릭)으로 인한 불필요한 서버 요청이나 함수 호출을 줄여 성능을 최적화하는 데 사용된다.
- 자바스크립트의
setTimeout과clearTimeout을 활용하여 구현하며, 이를 통해 효율적이고 안정적인 사용자 경험을 제공할 수 있다.
function debounce(callback, delay) {
let timerId;
// 디바운싱된 새로운 함수를 반환한다.
return function(...args) {
// 기존에 설정된 타이머가 있다면 취소한다.
clearTimeout(timerId);
// delay 이후에 callback 함수를 실행하는 새로운 타이머를 설정한다.
timerId = setTimeout(() => {
callback.apply(this, args);
}, delay);
};
}- 디바운싱 (Debouncing):
- 연속된 이벤트를 하나의 그룹으로 묶어 마지막 이벤트만 처리한다. (e.g., 검색어 입력: 마지막 단어가 중요)
- 쓰로틀링 (Throttling):
- 일정한 시간 간격(예: 1초)에 최대 한 번만 이벤트를 처리한다.
- 중간 이벤트를 무시하지 않고 주기적으로 실행을 보장한다. (e.g., 스크롤 이벤트: 스크롤하는 동안에도 주기적인 업데이트가 필요)
| 구분 | 디바운싱 (Debouncing) | 쓰로틀링 (Throttling) |
|---|---|---|
| 핵심 개념 | 마지막 이벤트만 처리 | 주기적으로 이벤트 처리 |
| 실행 보장 | 이벤트가 계속 발생하면 실행이 무기한 연기될 수 있음 | 지정된 시간 간격마다 실행을 보장 |
| 주요 사용 사례 | 검색 자동완성, 창 크기 조절, 버튼 중복 클릭 방지 | 스크롤 이벤트 처리, 무한 스크롤, 마우스 이동 감지 |
| 적합한 상황 | 연산의 최종 결과가 중요한 경우 | 과정의 중간 결과도 주기적으로 반영해야 하는 경우 |