跨浏览器resize事件分析

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即可满足一次调用即可