디버ounce(Debounce) 개념과 JavaScript 구현
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 프론트엔드 개발자 및 인터랙티브 웹 애플리케이션 설계자
- 중간 난이도 (기본 JavaScript 이해 필요)
핵심 요약
- Debounce는 연속된 이벤트 중 마지막 이벤트 후 일정 시간이 지난 후에만 함수를 실행하는 기법
- API 호출 최적화를 위해 반복적인 이벤트(예: 입력, 스크롤)에 적용
- JavaScript에서
setTimeout
과clearTimeout
을 활용한 함수 구현 예시
```javascript
function debounce(func, delay) { ... }
```
섹션별 세부 요약
1. Debounce란?
- 함수 실행 주기 제한을 통해 불필요한 처리 방지
- 사용 사례: 실시간 검색, 창 크기 조절, 스크롤 이벤트, 입력 시 폼 검증
- 기본 원리: 연속된 이벤트 발생 시 타이머 초기화 후 일정 시간 경과 후 실행
2. Debounce 작동 방식
- 타이머 초기화: 사용자가 빠르게 입력할 때마다 이전 타이머 취소
- 최종 실행 조건: X밀리초 동안 입력 없음 시 함수 실행
- 예시: "food" 입력 시 4번의 API 호출 → 1번으로 줄이기
3. JavaScript 구현 예시
- 함수 정의:
debounce(func, delay)
```javascript
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
```
- 이용 예: 검색 박스에 적용
```javascript
const debouncedSearch = debounce(handleSearch, 500);
document.getElementById("search").addEventListener("input", debouncedSearch);
```
4. 실무 적용 팁
- 타임아웃 설정: 200~1000ms 간격으로 설정 (사용자 경험과 성능 균형)
- 이벤트 종류:
input
,resize
,scroll
등에 유용 - 성능 개선: 불필요한 네트워크 요청 및 CPU 사용 감소
결론
- Debounce는 반복적 이벤트 최적화에 필수적 기법
- API 호출 주기 조절과 사용자 경험 향상을 동시에 달성
- JavaScript에서
setTimeout
과clearTimeout
을 활용한 간단한 구현 가능