解决 IE6 IE7 onresize的bug

IE下给window对象定义其onresize事件，在拉伸缩小窗口时，其onresize方法将被执行多次，并且其具体执行的次数在不同的电脑有不同的值，相当诡异，Firefox等其他浏览器则无此现象。具体可参看这一篇文章《window.onresize hangs IE6 and IE7》

高阶函数debounce 正是为此而生的

 

[javascript]  view plain copy

1. /** 
2.  * IE下 window.onresize 有bug 可以使用debounce封装监听函数  
3.  * see http://blog.youkuaiyun.com/fudesign2008/article/details/7035537 
4.  * @author FuDesign2008@163.com 
5.  * @date   2011-11-30 
6.  * @time   下午04:02:55 
7.  */  
8.   
9. /** 
10.  * 
11.  * @param {Function} callback 回调函数 
12.  * @param {Integer} delay   延迟时间，单位为毫秒(ms)，默认150 
13.  * @param {Object} context  上下文，即this关键字指向的对象，默认为null 
14.  * @return {Function} 
15.  */  
16. function debounce(callback, delay, context){  
17.     if (typeof(callback) !== "function") {  
18.         return;  
19.     }  
20.     delay = delay || 150;  
21.     context = context || null;  
22.     var timeout;  
23.     var runIt = function(){  
24.             callback.apply(context);  
25.         };  
26.     return (function(){  
27.         window.clearTimeout(timeout);  
28.         timeout = window.setTimeout(runIt, delay);  
29.     });  
30. }  
31. var winResizeHandler = function(event){  
32.       console.log("window resized");  
33. };  
34.   
35. window.onresize= debounce(winResizeHandler, 300);  

非常不错的解决方案