修复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 相关文章推荐
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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开发环境配置记录
2011/01/14 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python字典get()方法用法分析
2015/04/17 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python程序运行原理图文解析
2018/02/10 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python 实现线程之间的通信示例
2020/02/14 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
《美丽的公鸡》教学反思
2014/02/25 职场文书
学前班评语大全
2014/05/04 职场文书
企业党员个人自我评价
2014/09/20 职场文书
学习与创新自我评价
2015/03/09 职场文书
企业宣传稿范文
2015/07/23 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers