修复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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
js实现可爱的气泡特效
Sep 05 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python实现读取并保存文件的类
2017/05/11 Python
python主要用于哪些方向
2020/07/05 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
工会主席岗位责任制
2014/02/11 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
初中毕业感言300字
2015/07/31 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android