javascript(jquery) resize 이벤트 함수 한번만 실행하기

javascript(jquery)에서 resize이벤트를 걸게되면, 창이 resize되는동안 함수가 계속 동작하게 된다.
결과적으로 화면을 갱신하기 위해서 cpu도 계속 동작하기 때문에 브라우저에 과부하를 줄 수 있다.
이를 해결하기 위해서는 resize 완료시에만 이벤트를 걸고 싶은 마음이 생긴다.
다른 개발자들의 코드도 보았지만 아래의 형태가 가장 간단해서 소개하고자 한다.

var delta = 300;
var timer = null;

$( window ).on( 'resize', function( ) {
    clearTimeout( timer );
    timer = setTimeout( resizeDone, delta );
} );

function resizeDone( ) {
    // ...do
}

// or

window.addEventListener( 'resize', function( ) {
    clearTimeout( timer );
    timer = setTimeout( resizeDone, delta );
}, false );

간단히 설명하자만, resize 이벤트가 발행하면 이벤트 함수는
이전에 실행하려고 하였던 resizeDone 함수 실행을 취소한 후 다시 재등록한다.
계속 resize 중이면 동일하게 취소, 등록을 반복하다가
resize가 끝나면 마지막으로 등록한 이벤트 함수를 한번만 실해하게 된다.
짦으면서도 효과적인 소스인 것 같다.

참고URL: http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing