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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
详解Vue之事件处理
Jul 10 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下载文件超时时间的设置方法
2016/10/06 PHP
php封装的smarty类完整实例
2016/10/19 PHP
php数组指针操作详解
2017/02/14 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python创建和删除目录的方法
2015/04/29 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
护理自荐信范文
2013/10/05 职场文书
《四季》教学反思
2014/04/08 职场文书
学校欢迎标语
2014/06/18 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
贷款工资证明范本
2015/06/12 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python