修复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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JS使用setInterval计时器实现挑战10秒
Nov 08 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
php的ajax简单实例
2014/02/27 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
解读ES6中class关键字
2017/11/20 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python方向键控制上下左右代码
2018/01/20 Python
Python if语句知识点用法总结
2018/06/10 Python
详解python里的命名规范
2018/07/16 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python调用接口的4种方式代码实例
2019/11/19 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
给女儿的表扬信
2014/01/18 职场文书
保密普查工作实施方案
2014/02/25 职场文书
爱我中华教学反思
2014/04/28 职场文书
交通事故和解协议书
2014/09/25 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript