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 isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
js获取height和width的方法说明
Jan 06 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
解决$store.getters调用不执行的问题
Nov 08 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中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
vue从使用到源码实现教程详解
2016/09/19 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python如何读写字节数据
2020/08/05 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
电子信息毕业生自荐信
2013/11/16 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
市级三好学生评语
2014/12/29 职场文书
小学运动会入场口号
2015/12/24 职场文书
《社戏》教学反思
2016/02/22 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技