- 浏览: 118701 次
- 性别:
- 来自: 深圳
文章分类
window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,相当诡异
具体可参看这一篇文章<window.onresize hangs IE6 and IE7>
高阶函数debounce 正是为此而生的
具体可参看这一篇文章<window.onresize hangs IE6 and IE7>
高阶函数debounce 正是为此而生的
/** * IE下 window.onresize 有bug 可以使用debounce封装监听函数 * see http://blog.csdn.net/fudesign2008/article/details/7035537 * @author FuDesign2008@163.com * @date 2011-11-30 * @time 下午04:02:55 */ /** * * @param {Function} callback 回调函数 * @param {Integer} delay 延迟时间,单位为毫秒(ms),默认150 * @param {Object} context 上下文,即this关键字指向的对象,默认为null * @return {Function} */ function debounce(callback, delay, context){ if (typeof(callback) !== "function") { return; } delay = delay || 150; context = context || null; var timeout; var runIt = function(){ callback.apply(context); }; return (function(){ window.clearTimeout(timeout); timeout = window.setTimeout(runIt, delay); }); } var winResizeHandler = function(event){ console.log("window resized"); }; window.onresize= debounce(winResizeHandler, 300);
发表评论
-
CSS雪碧图demo(含雪碧代码)
2016-06-12 21:09 763css雪碧图demo效果图,含hover,代码附件下载sp ... -
easyui subgrid 多层子表格参考
2015-08-11 14:25 851参考回帖代码 http://bbs.csdn.net/topi ... -
鼠标拖拽DIV效果
2015-03-31 18:09 513代码效果-鼠标点击DIV,可以任意拖拽DIV <! ... -
css控制文本自动换行
2015-03-20 14:34 603http://wenku.baidu.com/link?ur ... -
js表单提交
2014-05-09 17:07 634js 表单提交 <html> <he ... -
滚动条样式
2014-05-06 20:53 324参考资料: http://manos.malihu.gr/t ... -
原生JavaScript技巧大收集100(上)
2013-12-30 19:53 424原生JavaScript技巧大收集,JavaScipt初学的各 ... -
编写jquery插件中的闭包demo
2013-12-18 16:43 2349demo中的代码,需要jquery库文件支持 //闭包特性 ... -
怎样让一个div高度自适应浏览器
2013-12-18 09:33 554网页中需要同时设置如下代码 html,body{heigh ... -
jquery框架学习
2013-12-10 09:27 397http://developer.51cto.com/art/ ... -
用JS的eval解析JSON中的注意点
2013-07-18 22:43 993eval 方法 将其中的参数 ... -
鼠标hover悬停事件
2013-07-16 16:50 851<title>鼠标hover悬停事件< ... -
html滚动条CSS样式
2013-07-16 16:19 875DEMO: body{ SCROLLBAR-FACE ... -
json数据结构
2013-06-06 16:42 602<script> //=====1===== ... -
JS函数-接收任意个参数
2013-06-06 09:28 2272<script> //可以接收任意多个参数 ... -
EXTJS3.0中文帮助文档
2013-06-05 19:38 831EXTJS中文帮助文档下载 -
EXTJS2.0表格中文排序
2013-06-05 14:42 984//引入必要的EXT开发环境 <link rel ... -
EXTJS3.0 IE9兼容性解决方案--IE兼容性解决方案
2013-05-24 14:57 1530我们的一个项目是用ExtJS做的,但在IE9下几乎完全不能用。 ... -
UI讨论
2013-05-22 15:27 7651.公司如果要研发自己的UI框架,JQuery和EXT该如何选 ... -
Extjs组件render说明与Demo
2013-05-02 16:05 17021.调用组件的render方法 panel.render ...
相关推荐
【JavaScript】解决页面onresize缩放时多次调用的问题 在网页开发中,我们常常需要监听浏览器窗口的resize事件,以便在用户改变窗口大小时调整布局或内容。然而,在JavaScript中,尤其是对于老旧的IE浏览器(如IE8...
总的来说,解决`window.onresize`事件多次触发的问题,关键在于利用防抖策略来控制函数的执行,确保在浏览器窗口大小改变时,我们的处理逻辑能够以预期的方式运行,同时优化了性能,避免了不必要的计算和网络请求。...
然而,在某些浏览器,尤其是IE8及以下版本和Chrome中,原生的`window.onresize`事件可能会出现多次执行的问题,这可能导致性能问题或者逻辑错误。为了解决这个问题,我们可以采用特定的事件绑定器来优化处理。 给定...
[removed] 在IE浏览器下有多次被执行甚至死循环的bug,会导致浏览器卡死 解决方案: 代码如下:// IE浏览器下将onresize事件放在div上if(navigator.userAgent && navigator.userAgent.toLowerCase().indexOf(“msie”...
因此,这里采用了防抖(debounce)技术,通过`setTimeout`延迟执行`divMiddle`函数,确保在多次`onresize`事件之间只执行一次,提高页面性能。 总的来说,实现HTML元素随浏览器大小自适应垂直居中,需要结合CSS布局和...
在实际开发中,还需要考虑性能优化,避免在`onresize`事件中执行过于复杂的操作,因为窗口大小的频繁改变可能会触发多次该事件,导致不必要的计算负担。合理地利用这两个事件,可以为用户提供更加舒适、适应性强的...
- 使用`window.onload`事件来确保DOM加载完成后立即执行一次,以设置初始状态。 - 使用`window.onresize`事件来监听窗口大小变化,并实时调整背景图尺寸。 2. **窗口尺寸检测**: - 在IE浏览器中,使用`document...
为了解决这个问题,一些方法被提出,比如延迟检测、状态保存等策略来确保即便`onresize`事件多次触发,也能准确判断屏幕的方向。 最后,我们可以得出一个用于判断iPhone和Android手机横竖屏模式的JavaScript函数...
在上述代码中,`throttle`函数接收一个待节流的方法和上下文作为参数,每次触发`onresize`事件时,它会确保`resizeDiv`函数至少等待100毫秒后再执行,防止连续的窗口调整导致的性能问题。 总之,深入理解JavaScript...
例如,当频繁地执行DOM操作时,为了减轻浏览器负担,我们可以使用节流来确保函数在一定时间内只执行一次。函数节流通过设置定时器,在上一次调用后的特定时间间隔后执行,如果在这期间再次调用,会重置定时器,从而...
函数节流的基本原理是通过设定一个时间间隔,在这个间隔内,即使函数被多次调用,也只会执行一次。当这个间隔过去后,如果函数再次被调用,才会执行下一次。这样可以确保函数不会过于频繁地执行,特别是在响应用户...
1. 确保在页面加载时就执行一次自适应高度的计算,以避免初始加载时布局不正确的问题。 2. 在使用float布局时,若存在多个浮动元素,应确保它们能够自适应高度,否则可能会出现布局错乱。 3. 使用JavaScript进行DOM...
8.9.html 多次打开输出流的效果。 8.10.html 使用write()方法生成页面。 8.11.html 使用writeln()方法生成文本并换行。 第9章(\c09) 示例描述:学习JavaScript中的window对象。 9.1.html 控制...
// 使用IIFE防止多次绑定 (function() { window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth; })(); }; } ``` 3. **使用`watch`监听属性变化**: 创建一个`watch`监听...
前端开发是构建Web应用的重要部分,主要负责用户与浏览器之间的交互。在前端领域,JavaScript是核心语言,它与HTML、CSS一起构成网页动态效果的基础。了解和熟练掌握JavaScript的基础知识,是成为一名月薪过万的前端...
文档片段是用于临时存放一组节点,以便一次性添加到文档中,可以提高性能。 - **访问和遍历DOM节点** - **单个节点** - `parentNode`:返回当前节点的父节点。 - `offsetParent`:返回包含当前元素的最近的定位父...