修复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 localStorage实现本地缓存的方法
Jun 22 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
vue 请求后台数据的实例代码
Jun 22 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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中的string类型使用说明
2010/07/27 PHP
php读取3389的脚本
2014/05/06 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
用javascript操作xml
2006/11/04 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python中操作符重载用法分析
2016/04/29 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
初中地理教学反思
2014/01/11 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
介绍信样本
2015/01/31 职场文书
公务员个人总结
2015/02/12 职场文书
教师聘用意向书
2015/05/11 职场文书
务工证明怎么写
2015/06/18 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python