최근 jquery 플러그인에서는 jQuery의 resize() 메서드를 사용하여 사용자가 브라우저 창 크기를 조정하고 관련 코드를 실행할 때를 감지했습니다.
창 크기를 조정할 때 다양한 브라우저의 성능 소비가 다르다는 것을 알았습니다.
IE, Safari, Chrome에서는 조정 창 변경 중에 resize 이벤트를 실행해 왔습니다.
Opera에서는 프로세스 중에 resize 이벤트가 여러 번 발생했지만 조정이 완료되면 실행됩니다.
Firefox는 조정이 완료된 후에만 이벤트를 실행합니다.
그리고 우리가 원하는 것은 당연히 조정이 끝난 후 이벤트를 실행하는 것입니다. 다행히도 이를 조정할 수 있는 여러 가지 방법이 있습니다.
jQuery 스로틀/디바운스: 때로는 적을수록 좋습니다!
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
Usage:
function log( event ) { console.log( $(window).scrollTop(), event.timeStamp ); }; // Console logging happens on window scroll, WAAAY more often // than you want it to. $(window).scroll( log ); // Console logging happens on window scroll, but no more than // once every 250ms. $(window).scroll( $.throttle( 250, log ) ); // Note that in jQuery 1.4+ you can unbind by reference using // either the throttled function, or the original function. $(window).unbind( 'scroll', log );
(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });
요약하자면 첫 번째는 간단하고 이해하기 쉽습니다. 더 포괄적이고 코드도 적으며 세 번째 유형은 거의 동일합니다.
두 번째: benalman.com/projects/jquery-throttle-debounce-plugin/
세 번째: www.paulirish.com/2009/throttled-smartresize-jquery-event- handler/
JavaScript 코드: unscriptable.com/2009/03/20/debounce-javascript-methods/
앞으로는 스크롤, 양식 크기 조정, 등. 주의 깊게 기억하세요.
위 내용은 jQuery를 최적화하는 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!