window.onresize 多次触发的解决方法

 更新时间:2013年11月08日 17:39:23   投稿:whsnow  
用了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 这个词不知道怎么翻译,兄弟我非科班出身,不敢轻易翻译,以免怡笑大方。:) 
// 
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")
});

这样就结束了

相关文章

  • bootstrap模态框消失问题的解决方法

    bootstrap模态框消失问题的解决方法

    这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS获取select的value和text值的简单实例

    JS获取select的value和text值的简单实例

    本篇文章主要是对JS获取select的value和text值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • Bootstrap3.0学习教程之JS折叠插件

    Bootstrap3.0学习教程之JS折叠插件

    这篇文章主要介绍了Bootstrap3.0学习教程之JS折叠插件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • javascript实现非常简单的小数取整功能示例

    javascript实现非常简单的小数取整功能示例

    这篇文章主要介绍了javascript实现非常简单的小数取整功能,结合具体实例形式分析了javascript数学运算取整相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • js模仿hover的具体实现代码

    js模仿hover的具体实现代码

    hover效果,想必大家并不陌生吧,接下来为大家介绍下使用js模仿hover,感兴趣的朋友可以参考下
    2013-12-12
  • vue渲染大量数据时卡顿卡死解决方法

    vue渲染大量数据时卡顿卡死解决方法

    这篇文章主要介绍了vue渲染大量数据时发生卡顿卡死问题时的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • bootstrap multiselect下拉列表功能

    bootstrap multiselect下拉列表功能

    这篇文章主要为大家详细介绍了bootstrap multiselect下拉列表功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JS 拼凑字符串的简单实例

    JS 拼凑字符串的简单实例

    下面小编就为大家带来一篇JS 拼凑字符串的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • HTTP HEAD请求的使用场合实例详解

    HTTP HEAD请求的使用场合实例详解

    这篇文章主要为大家介绍了HTTP HEAD请求的使用场合实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 网站404页面3秒后跳到首页的实例代码

    网站404页面3秒后跳到首页的实例代码

    我们看到很多网站会有有错误404页面,当页面不存存时就会提示,然后过几秒就会自动跳到首页了,下面我来给大家举一个404错误页面跳到首页实例,各位可参考,有需要的朋友可以参考一下
    2013-08-08

最新评论