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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
javascript removeChild 使用注意事项
Apr 11 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 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加密解密的代码
2006/10/09 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
PHP7 标准库修改
2021/03/09 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
个人存款证明书
2014/10/18 职场文书
教师群众路线心得体会
2014/11/04 职场文书
事业单位考察材料范文
2014/12/25 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
导游词之杭州西湖
2019/09/19 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
Python制作动态字符画的源码
2021/08/04 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python