[jQuery] window resize 이벤트가 끝났는지 체크하는 방법

<script>
$(window).resize(function() {
    alert("resizing");
});
</script>

위와 같은 jQuery 코드를 작성했을 경우 브라우저 창의 크기를 마우스 드래그로 변경시킬 때 계속해서 alert 창이 나타나게 될 것이다. 이럴 경우 윈도우 리사이즈 이벤트가 끝났을 때 즉 더 이상 크기 변화가 없을 때 함수를 실행하도록 하려면 어떻게 하면 좋을까? 여러 방법이 있겠지만 아래는 자바스크립트의 setTimeout 메소드를 이용해서 리사이즈 이벤트가 끝났는지 체크하는 코드이다.

<script>
var now = new Date();
var timeout = false;
var millisec = 200;
var tid;

$(window).resize(function() {
    now = new Date();
    if (timeout === false) {
        timeout = true;

        if(tid != null)
            clearTimeout(tid);

        tid = setTimeout(resize_check, millisec);
    }
});

function resize_check() {
    if (new Date() - now < millisec) {
        if(tid != null)
            clearTimeout(tid);

        tid = setTimeout(resize_check, millisec);
    } else {
        timeout = false;
        alert("Window resize end!");
    }
}
</script>

위 코드를 보면 0.2초마다 이벤트가 진행 중인지를 체크하도록 되어 있다. 시간을 변경하려면 var millisec = 200; 부분을 변경하면 된다.