用了window.onresize但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法。
 之前做一个扩展,需要在改变窗口大小的时候保证页面显示正常,于是用了 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 这个词不知道怎么翻译,兄弟我非科班出身,不敢轻易翻译,以免怡笑大方。:) 
// www.jbxue.com
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 多次调用

复制代码代码如下:
window.onresize = debounce( function(){ 
alert( 'hello world'); 
}, 100, true) 

// 在自动补齐中为了减少请求服务器次数也会用到 debounce, 只有连续敲键间隔大于某个值才会发送 ajax

window.onresize 多次触发的解决方法的更多相关文章

  1. 关于 android 的setOnItemClickListener 和 setOnItemLongClickListener 同时触发的解决方法

    关于 android 的setOnItemClickListener 和 setOnItemLongClickListener 同时触发的解决方法. 其实方法也是很简单 的主要 setOnItemLo ...

  2. document.onclick在ios上不触发的解决方法与touchstart点击穿透处理

    document.onclick = function (e) { var e = e ? e : window.event; var tar = e.srcElement || e.target; ...

  3. js实现window.open不被拦截的解决方法汇总

    一.问题: 今天在处理页面ajax请求过程中,想实现请求后打开新页面,就想到通过 js window.open 来实现,但是最终都被浏览器拦截了. 二.分析: 在谷歌搜索有没有解决方法,有些说可以通过 ...

  4. 使用Layered Window遇到的一些问题及解决方法

    1. 使用Layered Window需要设置 WS_EX_LAYERED 属性 2.  Layered Window不能作为Child Window 3. 它也不能包含子窗口,为什么呢,因为它收不到 ...

  5. nuxtjs在vue组件中使用window对象编译报错的解决方法

    我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...

  6. WPF中button按钮同时点击多次触发click解决方法

    DateTime lastClick = DateTime.Now; object obj = new object(); ; private void Button_Click(object sen ...

  7. C# 之 FileSystemWatcher事件多次触发的解决方法

    1.问题描述  程序里需要监视某个目录下的文件变化情况: 一旦目录中出现新文件或者旧的文件被覆盖,程序需要读取文件内容并进行处理.于是使用了下面的代码: public void Initial() { ...

  8. node.js中模块报错【window is not defined】的解决方法

    (function(window) { /* Keep source code the same */ // })(typeof window == "undefined" ? g ...

  9. Window下Qt Creator启动错误解决方法

    很多电脑现在都是用的是双显卡,高性能的独显和性能比较差但耗电少的集显,在Window10系统下右键点击软件,在"图形处理器"里面可以选择使用什么显卡操作此软件.下面是我在运行Qt ...

随机推荐

  1. 为什么在Windows有两个临时文件夹的环境变量Temp和Tmp?

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:为什么在Windows有两个临时文件夹的环境变量Temp和Tmp?.

  2. HP QC(Quality Center)在Windows 7 IE8 IE9下不能工作解决方案

    HP QC(Quantity Center)是一款不错的测试管理工具,公司的操作系统Windows 7登录到QC Server的Quality Center和Addin页面,客户端组件不能正常下载,从 ...

  3. 在HTTP响应标题中隐藏ASP.NET MVC的版本

    在默认情况下,ASP.NET MVC网站会在HTTP响应标题(Response Header)中动态添加目前使用的ASP.NET MVC版本编号.如果使用Fiddler Web Debugger工具查 ...

  4. hdu1430魔板(BFS+康托展开)

    做这题先看:http://blog.csdn.net/u010372095/article/details/9904497 Problem Description 在魔方风靡全球之后不久,Rubik先 ...

  5. oracle调优 浅析关联设计

    浅析关联设计 [范式] 比較理想的情况下,数据库中的不论什么一个表都会相应到现实生活中的一个对象,如球员是一个对象,球队是一个对象,赛程是一个对象,比赛结果又是一个对象等等,则就是范式. [关联设计] ...

  6. MVC - HtmlHelper类

    传统的Html元素不能和服务端数据进行绑定 HtmlHelper类提供了一系列的方法来生成Html元素 并可以实现与数据绑定在一起 然后生成Html Html.BeginForm(actionName ...

  7. 写个 Hello World 而已,要不要这么震撼?!

    Atom 编辑器的一个插件,可以让你写代码的时候体验狂拽酷炫的效果! 如果来点音乐.再配上机械键盘的话,写代码是不是爽到爆呢? 这货全名叫: activate-power-mode atom pack ...

  8. 玩转Android之Picasso使用详详详详详详解,从入门到源码剖析!!!!

    Picasso是Squareup公司出的一款图片加载框架,能够解决我们在Android开发中加载图片时遇到的诸多问题,比如OOM,图片错位等,问题主要集中在加载图片列表时,因为单张图片加载谁都会写.如 ...

  9. XML操作 之获取指定节点值

    根据节点名称快速查找 指定节点值 using (TextReader stringReader = new StringReader(clearPassResponse)) { XmlReaderSe ...

  10. .Net 下FCKeditor上传图片加水印

    配置FCKEditor请参考网上的. 如果你用的是.net的FCKEditor,把用到的FCKEditor.Net项目解压缩 在FCKEditor.net项目中,依次找到FileBrowser--&g ...