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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery的map与get方法详解
Nov 04 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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 数字左侧自动补0
2008/03/31 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
初识Node.js
2015/03/20 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
Django数据库表反向生成实例解析
2018/02/06 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
一年级学生评语
2014/04/23 职场文书
代收款委托书范本
2014/10/01 职场文书
2019广播稿怎么写
2019/04/17 职场文书