修复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 相关文章推荐
重定向实现代码
Nov 20 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
vue中的计算属性和侦听属性
Nov 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新手上路(三)
2006/10/09 PHP
php不用正则验证真假身份证
2013/11/06 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
vue组件的写法汇总
2018/04/12 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python scipy卷积运算的实现方法
2019/09/16 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
UML设计模式笔试题
2014/06/07 面试题
电钳专业个人求职信
2014/01/04 职场文书
银行实习生的自我评价
2014/01/13 职场文书
出纳员岗位责任制
2014/02/11 职场文书
股权转让意向书
2014/04/01 职场文书
给公司的建议书范文
2014/05/13 职场文书
华山导游词
2015/02/03 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
主题班会开场白
2015/06/01 职场文书
环保建议书作文300字
2015/09/14 职场文书