Detailed examples of how to optimize jQuery

In a recent jquery plug-in, I used the resize() method in jQuery to detect when the user resizes the browser window and run related code.

I noticed that the performance consumption of various browsers is different when resizing the window.

IE, Safari, and Chrome have been executing resize events during the adjustment window changes

Opera has had many resize events occur during this process, but Executed at the end of adjustment.

Firefox only executes the event after the adjustment is completed.

What we want is obviously to execute the event after the adjustment is completed. Fortunately, there are several ways we can adjust this.

jQuery lazy plug-in

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);

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 );

JS code

(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...
});

To sum up, the first one is simple and easy to understand, the second one is more comprehensive and has less code, and the third one is almost the same.

javascript-resize-performance/

Second type: benalman.com/projects/jquery-throttle-debounce-plugin/

Third type: www.paulirish. com/2009/throttled-smartresize-jquery-event-handler/

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

For scrolling and adjustment in the future Form size, etc. It is best to use this method to reduce the number of JavaScript executions. Remember carefully.

The above is the detailed content of Detailed examples of how to optimize jQuery. For more information, please follow other related articles on the PHP Chinese website!