修复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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 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
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php从字符串创建函数的方法
2015/03/16 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
js form action动态修改方法
2008/11/04 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
详细解读Python中的__init__()方法
2015/05/02 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python实现名片管理系统
2020/02/14 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
会计岗位描述
2014/02/22 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
新春寄语大全
2014/04/09 职场文书
读书之星事迹材料
2014/05/12 职场文书
房地产活动策划方案
2014/05/14 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python