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全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
extjs render 用法介绍
Sep 11 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
原生JS实现拖拽功能
Dec 16 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
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
Python中为什么要用self探讨
2015/04/14 Python
python executemany的使用及注意事项
2017/03/13 Python
Python执行时间的计算方法小结
2017/03/17 Python
python2 与python3的print区别小结
2018/01/16 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python函数的作用域及关键字详解
2019/08/20 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
网络维护中文求职信
2014/01/03 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
营销计划书范文
2015/01/17 职场文书
社区服务活动感想
2015/08/11 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang