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 each函数的链式调用
Jul 22 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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扩展介绍与开发教程
2010/08/19 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
医药专业推荐信
2013/11/15 职场文书
小学信息技术教学反思
2014/02/10 职场文书
《钱学森》听课反思
2014/03/01 职场文书
挂牌仪式主持词
2014/03/20 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
人事代理委托书
2014/09/27 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
致运动员赞词
2015/07/22 职场文书
初中生物教学随笔
2015/08/15 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
php引用传递
2021/04/01 PHP
关于Python中*args和**kwargs的深入理解
2021/08/07 Python