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

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

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

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

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

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

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

2 댓글
Oldest
Newest
Inline Feedbacks
View all comments
권김밥
권김밥
2 years ago

선생님...선생님이 저를 살리셨어요..정말 정말 감사합니다. 옛날 글이라 댓글을 보실진 모르겠지만..........창 줄일때마다 렉 걸리는거 짱났는데 감사합니다.,..,.

naminsik
naminsik
2 years ago
Reply to  권김밥

안녕하세요.
주말 야외 활동 중에 댓글 남기신 게 알림이 떠서 내용을 보고 뿌듯해하며 감사 댓글 남겨드려야지 하다가 평일에 회사일이 바빠 이제 남깁니다 ㅠ
도움이 되어 정말 다행이네요. ^^

TOP