修复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的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JScript中的条件注释详解
Apr 24 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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作的文本留言本的例子(六)
2006/10/09 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
js常用代码段整理
2011/11/30 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
临床医学大学生求职信
2013/09/28 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
自查自纠工作总结
2014/10/15 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers