resize事件
原生事件分析
window一次resize事件：
IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次
Chrome 触发1次
- FF 触发2次
- Opera 触发1次
- Safari 触发1次
场景分析
- window 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 ] );
};
长处：分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就可以满足一次调用就可以