修复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 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
javascript表单事件处理方法详解
May 15 Javascript
VUE长按事件需求详解
Oct 18 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 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安全技术之 实现php基本安全
2010/09/04 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
js 动态选中下拉框
2009/11/26 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
基于Python os模块常用命令介绍
2017/11/03 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
外企C语言笔试题
2013/11/10 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
工商企业管理应届生求职信
2013/11/03 职场文书
影视制作岗位职责
2013/12/04 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
力学专业求职信
2014/07/23 职场文书
法院授权委托书范文
2014/08/02 职场文书
员工辞职信怎么写
2015/02/27 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers