resize事件

原生事件分析

window一次resize事件：

IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次

Chrome 触发1次

FF 触发2次 Opera 触发1次 Safari 触发1次

场景分析

window resize时。部分组件须要重置大小（一次）。部分组件不须要重置大小。

开源库分析

jquery-resize

长处：使用简便

$('#div1').on('resize', function (e) { console.log('[div1] resize'); }) $('#div1').resize(function (e) { console.log('[div1] resize2'); });

缺点：内部使用轮询，性能堪忧

function loopy() { // Start the polling loop, asynchronously. timeout_id = window[ str_setTimeout ](function(){ // Iterate over all elements to which the 'resize' event is bound. elems.each(function(){ var elem = $(this), width = elem.width(), height = elem.height(), data = $.data( this, str_data ); // If element size has changed since the last time, update the element // data store and trigger the 'resize' event. if ( width !== data.w || height !== data.h ) { elem.trigger( str_resize, [ data.w = width, data.h = height ] ); } }); // Loop. loopy(); }, jq_resize[ str_delay ] ); }; jquery-smartresize

长处：分Debounced和Throttled两种类型，类型明白

缺点：使用不算简易

$(window).on("debouncedresize", function( event ) { // Your event handler code goes here. }); // or... $(window).on("throttledresize", function( event ) { // Your event handler code goes here. }); // unbind at will $(window).off( "debouncedresize" );

结论

大多数场景使用jquery-smartresize的Debounced就可以满足一次调用就可以

转载于:https://www.cnblogs.com/bhlsheji/p/5244117.html