jQuery-브라우저 창 사이즈 조절에 따른 이벤트 만들기

 브라우저를 크기 조절에 의한 이벤트를 받아 명령을 내릴 때 주로 사용한다.
기본 적으로 아래처럼 사용한다.

$(window).resize(function(){ 
//리사이즈시 실행할 코드 
});

그런데 이렇게 사용하게 되면 브라우저를 조절하는 동안에 계속해서 작동하게 되어 오히려 브라우저 성능을 저하 시켜서 느려지게 된다.
그래서 보통 실무에서는 아래처럼 사용했다.

var resizeTimer;
$(window).bind('resize', function( ) {
    window.clearTimeout( resizeTimer );
    resizeTimer = window.setTimeout( resizeFunction, 500 );
});
function resizeFunction(){
//리사이즈시 실행할 코드
}

이렇게 되면 사이즈를 조절이 끝난 0.5초 후에 작동되기에 마우스로 브라우저를 조절이 멈춘 0.5초 후에 작동되게 만든 것이다.

TOP