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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 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
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
浅析Cookie中的Path与domain
2013/12/18 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Anaconda入门使用总结
2018/04/05 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python中的global关键字的使用方法
2019/08/20 Python
python列表推导式操作解析
2019/11/26 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
上海微创软件面试题
2012/06/14 面试题
渗透攻击的测试步骤
2014/06/07 面试题
2015年党风建设工作总结
2015/04/29 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Go语言实现Snowflake雪花算法
2021/06/08 Golang
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技