修复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 相关文章推荐
ie与ff下的event事件使用介绍
Nov 25 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 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
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python自动翻译实现方法
2016/05/28 Python
python编程线性回归代码示例
2017/12/07 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python hmac模块使用实例解析
2019/12/24 Python
学习Python需要哪些工具
2020/09/04 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
仓库管理专业个人自我评价范文
2013/11/11 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
春游踏青活动方案
2014/08/14 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python