[JavaScript] 디바운스(debounce) js, 이벤트(함수) 중복 실행 방지

[JavaScript] 디바운스(debounce) 에 대하여

간만에 자바스크립트 관련 쓸만한 기능을 발견해서 포스팅 해봅니다. 

디바운스(debounce)를 쉽게 설명해본다면, '과도한 이벤트 중복 실행 방지' 정도가 되겠습니다. 

(지극히 개인적인 생각입니다. 정확한 정의는 구글 검색을 참조해 주세요 ^^;)

예를 들면 중복 알림 방지 같은 기능 구현시 요긴하게 쓸 수 있을 것 같습니다. 

그럼 본격적으로 한번 살펴보겠습니다. 

아래는 먼저, 일반적인 상황의 예시입니다. 

<script>
function test(){
    console.log(1);
}
 
window.addEventListener('resize', test);
</script>

이 소스에 따르면, 해당 페이지는 resize 할 때 마다 console.log(1) 이 실행 될 것입니다. 

소스를 적용하여 실제 페이지에서 resize를 4번 수행해 보았습니다. 

크롬 개발자 도구로 확인 결과, resize 4번에 console.log(1) 이 무려 89회나 실행된 모습입니다. 

보통 resize 시 이벤트는 이렇게 연속적으로 실행되는게 맞겠지만, 지금은 단지 예를 들기위해 사용한 것 뿐이므로... 

실제 적용 될만한 상황을 생각해 봅시다.

다음은 디바운스를 적용한 경우의 예시입니다. 

<script>
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
 
var myEfficientFn = debounce(function() {
    console.log(1);
}, 250);
 
window.addEventListener('resize', myEfficientFn);
</script>

(소스는 https://davidwalsh.name/javascript-debounce-function 링크를 참조하였습니다.)

위와 동일하게 resize를 4번 수행해봅니다. 

과연 결과는 어떨까요? 

네. 딱 4번만 실행되었습니다. 

테스트 시 resize가 끝나는 시점에 딱 1번씩만 실행되는 것을 볼 수 있었습니다. 

이렇게 간단히 예를 들어보았는데, 디바운스에 대해 대충 감이 오시나요?

개인적으로 이때까지 작업을 하면서 이 기능이 필요한 경우가 꽤 있었습니다만... 몰라서 쓰지못했고 혼자 요상하게 소스를 짜서 처리를 했었습니다. 

하지만 이제 디바운스(debounce) 에 대해 알게되었으니, 좀 더 수월하게 작업을 할 수 있겠네요.