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时间下拉框小例子
Apr 15 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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中使用循环实现的金字塔图形
2014/11/08 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
js轮播图代码分享
2016/07/14 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
python list语法学习(带例子)
2013/11/01 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
创业女性典型材料
2014/05/02 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书