함수 디바운싱

언어:

JavaScript

42 조회

0 즐겨찾기

2025年9月19日

코드 구현

JavaScript

function debounce(fn,delay){
    let timerId;
    return function(...args){
        clearTimeout(timerId);
        timerId=setTimeout(()=>{
            fn.apply(this,args);
        },delay);
    };
}

//usage
const d_layout = debounce(layout,500);
window.onresize = d_layout;

디바운스 함수는 JavaScript에서 고빈도且つ시간이 소요되는 작업을 최적화하기 위한 핵심 도구입니다. 그 핵심 로직은「함수 실행 지연 + 반복되는 지연 취소」로, 단시간 내에 여러 번 트리거된 함수가 마지막 트리거 후 지정된 지연 시간을 기다린 뒤에만 실행되도록 보장하여 불필요한 호출로 인한 성능 손실을 방지합니다.

그 작동 원리는「엘리베이터 문 닫히는 과정」에 비유하여 이해할 수 있습니다：엘리베이터 문이 열린 후 기본적으로 일정 시간（예：2초）을 기다린 뒤 닫힙니다. 이 대기 중에 새로운 승객이 들어온다면（함수가 새로 트리거되는 것에 해당）기존 대기 타이머가 취소되고 카운트다운이 재시작됩니다. 카운트다운이 끝난 후에도 새로운 트리거가 없는 경우에만「문 닫기」동작（함수 실행에 해당）이 이뤄집니다.

#함수 디바운싱

스니펫 설명

적용 시나리오

고빈도 트리거：단시간 내에 함수가 반복 호출되는 경우（예：윈도우 resize 이벤트、입력 필드 input 이벤트）。이것은 DOM 이벤트에 제한되지 않고 Node.js와 같은 비DOM 환경에서의 고빈도 함수 호출에도 적용됩니다.
시간 소요 함수：호출되는 함수가 CPU 집약型（예：페이지 레이아웃 계산、리플로우/리페인트를 일으키는 대량 DOM 조작）또는 IO 집약型（예：네트워크 요청、파일 읽기/쓰기）작업인 경우。1+1 계산과 같은 단순한 작업에는 디바운싱이 필요하지 않습니다.
마지막 결과 우선：단시간 내 여러 번의 호출 결과 중에서 마지막 호출 결과만 유지하면 되는 경우。예를 들어 윈도우 크기 조절 후에는 최종 크기에 해당하는 레이아웃만 필요하며, 조절 과정에서 생성된 레이아웃은 무의미합니다.

함수 디바운싱

코드 구현

스니펫 설명

적용 시나리오

추천 스니펫

Node.js 파일 읽기 및 쓰기 예제

SQL 데이터 필터링 및 정렬

Hello World

댓글