修复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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
setTimeout学习小结
Feb 08 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 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读取目录所有文件信息dir示例
2014/03/18 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP重载基础知识回顾
2020/09/10 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
详解python的几种标准输出重定向方式
2016/08/15 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
详解python 注释、变量、类型
2018/08/10 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
祖国在我心中演讲稿400字
2014/05/04 职场文书
应届生自荐信
2014/06/30 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
Python装饰器详细介绍
2022/03/25 Python