IE下给window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,相当诡异,Firefox等其他浏览器则无此现象。具体可参看这一篇文章《window.onresize hangs IE6 and IE7》
高阶函数debounce 正是为此而生的
/**
* IE下 window.onresize 有bug 可以使用debounce封装监听函数
* see http://blog.csdn.net/fudesign2008/article/details/7035537
* @author FuDesign2008@163.com
* @date 2011-11-30
* @time 下午04:02:55
*/
/**
*
* @param {Function} callback 回调函数
* @param {Integer} delay 延迟时间,单位为毫秒(ms),默认150
* @param {Object} context 上下文,即this关键字指向的对象,默认为null
* @return {Function}
*/
function debounce(callback, delay, context){
if (typeof(callback) !== "function") {
return;
}
delay = delay || 150;
context = context || null;
var timeout;
var runIt = function(){
callback.apply(context);
};
return (function(){
window.clearTimeout(timeout);
timeout = window.setTimeout(runIt, delay);
});
}
var winResizeHandler = function(event){
console.log("window resized");
};
window.οnresize= debounce(winResizeHandler, 300);
非常不错的解决方案