修复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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
JS简单表单验证功能完整示例
Jan 26 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
自己动手做一个SQL解释器
2006/10/09 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue实现选中效果
2020/10/07 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
24式加速你的Python(小结)
2019/06/13 Python
python实现可变变量名方法详解
2019/07/01 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
什么是Rollback Segment
2013/04/22 面试题
给女儿的表扬信
2014/01/18 职场文书
12岁生日感言
2014/01/21 职场文书
个性发展自我评价2015
2015/03/09 职场文书
转学证明范本
2015/06/19 职场文书
自考生自我评价
2019/06/21 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis