修复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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
React如何避免重渲染
Apr 10 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
node+multer实现图片上传的示例代码
Feb 18 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
销售业务员岗位职责
2014/01/29 职场文书
大学生毕业鉴定
2014/01/31 职场文书
健康家庭事迹材料
2014/05/02 职场文书
党员评议思想汇报
2014/10/08 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
离婚案件答辩状
2015/05/22 职场文书
话题作文之呼唤
2019/12/18 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python