修复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 Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
利用static实现表格的颜色隔行显示
2006/10/09 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
城管大队整治方案
2014/05/06 职场文书
明确岗位职责
2015/02/14 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python