debounce 함수

짧은 시간에 여러 번 호출되는 함수를 일정 시간 간격을 두고 한 번만 실행하게 만드는 함수.

ex) resize 이벤트때 실행되는 함수는 창 크기를 바꿀때 초당 수십~수백번 발생하기 때문에 부하 발생, debounce 함수를 통해 마지막 호출 이후 ~ms가 지나면 한 번만 실행하도록 조절

 

function debounce(func, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout); // 이전 타이머 취소
        timeout = setTimeout(func, wait); // 새 타이머 시작
    };
}


// 사용예시: resize 이벤트에 적용
$(window).on('resize', debounce(function() {
    console.log('실행됨:', new Date().toLocaleTimeString());
}, 200));

 

실행결과 : 창 크기 드래그가 멈춘뒤 0.2초후 한번만 console 찍힘