Rumah > hujung hadapan web > tutorial js > 关于如何优化jQuery的实例详解

关于如何优化jQuery的实例详解

零下一度
Lepaskan: 2017-06-17 17:46:08
asal
1356 orang telah melayarinya

在最近的一个jquery插件中,我使用到了jQuery中的resize()方法来检测用户调整浏览器窗口并运行相关代码。

我注意到resize window时各个浏览器的性能消耗不一。

IE、Safari、Chrome在调整窗口变化中一直在执行resize事件

Opera则在这个过程中发生了很多次resize事件,但在结束调整时执行。

Firefox则是只在调整结束后才执行事件。

而我们想要的明显是在结束调整之后才执行事件。幸运的是我们可以通过以下几种方法来调整。

jQuery惰性插件

jQuery throttle / debounce: Sometimes, less is more!

(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);
Salin selepas log masuk

使用方法:

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 );
Salin selepas log masuk

JS代码

(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...
});
Salin selepas log masuk

总结起来第一种简单容易理解,第二种则是比较全面,代码也少,第三种也差不多。

javascript-resize-performance/

第二种:benalman.com/projects/jquery-throttle-debounce-plugin/

第三种:www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

JavaScript代码:unscriptable.com/2009/03/20/debouncing-javascript-methods/

以后对于滚动、调整窗体大小等最好使用这种方法来减少JavaScript执行的次数。慎记。

Atas ialah kandungan terperinci 关于如何优化jQuery的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan