修复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的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
js实现验证码功能
Jul 24 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隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
js静态作用域的功能。
2006/12/25 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Django CBV类的用法详解
2019/07/26 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
一套SQL笔试题
2016/08/14 面试题
linux面试题参考答案(3)
2012/09/13 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
中学教师自我鉴定
2014/02/07 职场文书
项目合作意向书范本
2014/04/01 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript