修复ie8&chrome下window的resize事件多次执行


Posted in Javascript onOctober 20, 2011
/** 
* window.onresize 事件 专用事件绑定器 v0.1 Alucelx 
* http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html 
* <description> 
* 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG. 
* </description> 
* <methods> 
* add: 添加事件句柄 
* remove: 删除事件句柄 
* </methods> 
*/ 
var onWindowResize = function(){ 
//事件队列 
var queue = [], 
indexOf = Array.prototype.indexOf || function(){ 
var i = 0, length = this.length; 
for( ; i < length; i++ ){ 
if(this[i] === arguments[0]){ 
return i; 
} 
} 
return -1; 
}; 
var isResizing = {}, //标记可视区域尺寸状态, 用于消除 lte ie8 / chrome 中 window.onresize 事件多次执行的 bug 
lazy = true, //懒执行标记 
listener = function(e){ //事件监听器 
var h = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight, 
w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth; 
if( h === isResizing.h && w === isResizing.w){ 
return; 
}else{ 
e = e || window.event; 
var i = 0, len = queue.length; 
for( ; i < len; i++){ 
queue[i].call(this, e); 
} 
isResizing.h = h, 
isResizing.w = w; 
} 
} 
return { 
add: function(fn){ 
if(typeof fn === 'function'){ 
if(lazy){ //懒执行 
if(window.addEventListener){ 
window.addEventListener('resize', listener, false); 
}else{ 
window.attachEvent('onresize', listener); 
} 
lazy = false; 
} 
queue.push(fn); 
}else{ } 
return this; 
}, 
remove: function(fn){ 
if(typeof fn === 'undefined'){ 
queue = []; 
}else if(typeof fn === 'function'){ 
var i = indexOf.call(queue, fn); 
if(i > -1){ 
queue.splice(i, 1); 
} 
} 
return this; 
} 
}; 
}.call(this);

绑定window 的 resize 事件,请使用这个对象
示例:
var _fn = function(){document.body.innerHTML += "1"}; 
onWindowResize.add(_fn) 
.add(function(){document.body.innerHTML += "2"}) 
.add(function(){document.body.innerHTML += "3"}) 
.remove(_fn);
Javascript 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
Angular2数据绑定详解
Apr 18 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
JS原形与原型链深入详解
May 09 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 #Javascript
IE与FireFox中的childNodes区别
Oct 20 #Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 #Javascript
基于jquery的$.ajax async使用
Oct 19 #Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 #Javascript
模拟select的代码
Oct 19 #Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 #Javascript
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
php的dl函数用法实例
2014/11/06 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Python的subprocess模块总结
2014/11/07 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
护士实习自我鉴定
2013/10/22 职场文书
工程总经理工作职责
2013/12/09 职场文书
家长会学生演讲稿
2014/04/26 职场文书
保证书范文大全
2014/04/28 职场文书
营销与策划专业求职信
2014/06/20 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
保管员岗位职责
2015/02/14 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
休学证明范本
2015/06/19 职场文书
行政复议答复书
2015/07/01 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android