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请求实例深入解析
Nov 26 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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
php5中类的学习
2008/03/28 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
一些mootools的学习资源
2010/02/07 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python中无限元素列表的实现方法
2014/08/18 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
python可以用哪些数据库
2020/06/22 Python
python与js主要区别点总结
2020/09/13 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
学校十一活动方案
2014/02/01 职场文书
自荐信的基本格式
2014/02/22 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
规范化管理年活动总结
2014/08/29 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
广播体操比赛主持词
2015/06/29 职场文书
新党员入党决心书
2015/09/22 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书