修复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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
vue watch监控对象的简单方法示例
Jan 07 Vue.js
JavaScript 去重和重复次数统计
Mar 31 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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生成WAP页面
2006/10/09 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
php查询内存信息操作示例
2019/05/09 PHP
php探针不显示内存解决方法
2019/09/17 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
javascript自定义右键菜单插件
2019/12/16 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
python实现音乐下载器
2018/04/15 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
如何清空python的变量
2020/07/05 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
项目经理任命书内容
2014/06/06 职场文书
保研推荐信范文
2015/03/25 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书