setTimeout 과 clearTimeout 을 사용하여 간단하게 smartresize 기능 만들기

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' 이벤트에도 같은 설정을 할 수 있다.