Explanation
'resize' 이벤트 핸들러를 있는 그대로 사용해야 할 때도 있지만 대부분(개인적으로..) 'resize' 는 필요 이상으로 함수를 반복 실행시켜서, jQuery 플러그인 smartresize 를 자주 사용하는 편이다.
플러그인 분석도 해볼겸 간단하게 만들어 사용하는 방법을 살짝 적어 보겠습니다.
참고 링크 : jQuery.smartresize (https://github.com/louisremi/jquery-smartresize)
jQuery(document).ready(function(){
var smartResize = {
init : function(){
var self = this;
$(window).on("resize", function(){
self.handler(); // 윈도우의 사이즈가 변하면 handler() 함수를 실행
});
},
timeOut : '',
handler : function(){
var self = this;
if(self.timeOut) clearTimeout(self.timeOut)
//setTimeOut 이 걸려있다면 클리어
self.timeOut = setTimeout(self.action, 150);
// 150ms 동안 이벤트가 반복 실행 되지 않으면 action() 함수를 실행
},
action : function(){
console.log("Smart Resize Event");
}
};
smartResize.init();
});
아주 약간 응용하자면 'resize'가 아닌 필요에 따라 'scroll' 이벤트에도 같은 설정을 할 수 있다.



