window.onresize 多次触发的解决方法


Posted in Javascript onNovember 08, 2013

之前做一个扩展,需要在改变窗口大小的时候保证页面显示正常,于是用了 window.onresize 但是发现每次 onresize 后页面中状态总是不对,后来查找出来原来是 onresize 事件触发了多次找成的,于是网上搜集了下解决办法,整理一下。
//
关于 onresize 事件触发次数,不同浏览器不同,safari, opera, firefox 都是一次(分别只用了一个版本测试,都是较新的);
//ie6 在 quirk 下触发 2 次,标准下 3 次;ie7,8 在 quirk 和 standard 都是两次。

window.onresize = function(){ 
console.log( 'hello world'); 
} 
onresize 触发多少次并不重要,重要的是解决办法:在触发多次的情况下之调用一次帮定到 onresize 上的函数 
// 
//debounce 这个词不知道怎么翻译,兄弟我非科班出身,不敢轻易翻译,以免怡笑大方。:) 
// 
var debounce = function (func, threshold, execAsap) { 
var timeout; 
return function debounced () { 
var obj = this, args = arguments; 
function delayed () { 
if (!execAsap) 
func.apply(obj, args); 
timeout = null; 
}; 
if (timeout) 
clearTimeout(timeout); 
else if (execAsap) 
func.apply(obj, args); 
timeout = setTimeout(delayed, threshold || 100); 
}; 
} 
// 说明代码不是我写的。 
// 代码说明: 
debounce 接受 3 个参数,后两个可选;第一个是要 debounce 的函数, 第二个代表 debouce 的时间间隔,第三个在时间段的开始还是结束执行函数; 
debounce 返回包装好的函数,该函数两次执行间隔至少是 threshold,并且小于 threshold 间隔的调用会重新开始计时( 两次调用的时间间隔); 
把 clearTimeout( timeout ) 换为 timer = null; 返回函数两次执行间隔至少是 threshold,并且小于 threshold 间隔的调用会重新开始计时( 两次调用的时间间隔); 
// 解决 onresize 多次调用 
[code] 
window.onresize = debounce( function(){ 
alert( 'hello world'); 
}, 100, true) 


// 在自动补齐中为了减少请求服务器次数也会用到 debounce, 只有连续敲键间隔大于某个值才会发送 ajax

resize只能绑定一个?

对的,用下边这种写法,一个页面中,resize只能绑定一个。

下边的代码,就永远只会打印出“2”,而没有“1”。

// resize只能绑定、执行一个。此时只执行后边那个。
window.onresize = function(){
  console.log("1")
}
window.onresize = function(){
  console.log("2")
}

但是用下边这种写法,俩都可以执行了。

// addEventListener绑定,就可以两次都执行
window.addEventListener("resize", function(){
  console.log("3")
});
window.addEventListener("resize", function(){
  console.log("4")
});

这样就结束了

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JavaScript实现三级联动效果
Jul 15 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
jquery ajax修改全局变量示例代码
Nov 08 #Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 #Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 #Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
three.js搭建室内场景教程
2018/12/30 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python生成器实现简单"生产者消费者"模型代码实例
2020/03/27 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
如何利用python 读取配置文件
2021/01/06 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
校庆活动方案
2014/03/31 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
爱牙日活动总结
2014/08/29 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android