IE8 이상의 브라우저에서 동일하게 보여지는 Placeholder 만들기
2014-03-17
setTimeout 과 clearTimeout 을 사용하여 간단하게 smartresize 기능 만들기
2015-08-04
Explanation
‘resize’ 이벤트 핸들러를 있는 그대로 사용해야 할 때도 있지만 대부분(개인적으로..) ‘resize’ 는 필요 이상으로 함수를 반복 실행시켜서, jQuery 플러그인 smartresize 를 자주 사용하는 편이다.
플러그인 분석도 해볼겸 간단하게 만들어 사용하는 방법을 살짝 적어 보겠습니다.
참고 링크 : jQuery.smartresize (https://github.com/louisremi/jquery-smartresize)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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’ 이벤트에도 같은 설정을 할 수 있다.
