修复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 表单下所有元素的隐藏
Jul 25 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
angular2使用简单介绍
Mar 01 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
vue中轮训器的使用
Jan 27 Javascript
vant实现购物车功能
Jun 29 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP加密解密实例分析
2015/12/25 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
js查错流程归纳
2012/05/04 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Vue指令指令大全
2019/02/09 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python递归全排列实现方法
2018/08/18 Python
用Django写天气预报查询网站
2018/10/21 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
企业消防安全制度
2014/02/02 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
摩登时代观后感
2015/06/03 职场文书
品德与社会教学反思
2016/02/24 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python