`

浏览器onresize方法将被执行多次问题解决

    博客分类:
  • UI
阅读更多
    window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,相当诡异
    具体可参看这一篇文章<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);

分享到:
评论

相关推荐

    [JavaScript]解决页面onresize缩放时多次调用的问题.doc

    【JavaScript】解决页面onresize缩放时多次调用的问题 在网页开发中,我们常常需要监听浏览器窗口的resize事件,以便在用户改变窗口大小时调整布局或内容。然而,在JavaScript中,尤其是对于老旧的IE浏览器(如IE8...

    [removed] 多次触发的解决方法

    总的来说,解决`window.onresize`事件多次触发的问题,关键在于利用防抖策略来控制函数的执行,确保在浏览器窗口大小改变时,我们的处理逻辑能够以预期的方式运行,同时优化了性能,避免了不必要的计算和网络请求。...

    修复ie8&amp;chrome下window的resize事件多次执行

    然而,在某些浏览器,尤其是IE8及以下版本和Chrome中,原生的`window.onresize`事件可能会出现多次执行的问题,这可能导致性能问题或者逻辑错误。为了解决这个问题,我们可以采用特定的事件绑定器来优化处理。 给定...

    IE下[removed] 多次调用与死循环bug处理方法介绍

    [removed] 在IE浏览器下有多次被执行甚至死循环的bug,会导致浏览器卡死 解决方案: 代码如下:// IE浏览器下将onresize事件放在div上if(navigator.userAgent && navigator.userAgent.toLowerCase().indexOf(“msie”...

    让html元素随浏览器的大小自适应垂直居中的实现方法

    因此,这里采用了防抖(debounce)技术,通过`setTimeout`延迟执行`divMiddle`函数,确保在多次`onresize`事件之间只执行一次,提高页面性能。 总的来说,实现HTML元素随浏览器大小自适应垂直居中,需要结合CSS布局和...

    浏览器窗口加载和大小改变事件示例

    在实际开发中,还需要考虑性能优化,避免在`onresize`事件中执行过于复杂的操作,因为窗口大小的频繁改变可能会触发多次该事件,导致不必要的计算负担。合理地利用这两个事件,可以为用户提供更加舒适、适应性强的...

    JS控制网页背景随窗口大小自动适应

    - 使用`window.onload`事件来确保DOM加载完成后立即执行一次,以设置初始状态。 - 使用`window.onresize`事件来监听窗口大小变化,并实时调整背景图尺寸。 2. **窗口尺寸检测**: - 在IE浏览器中,使用`document...

    javascript判断iphone/android手机横竖屏模式的函数

    为了解决这个问题,一些方法被提出,比如延迟检测、状态保存等策略来确保即便`onresize`事件多次触发,也能准确判断屏幕的方向。 最后,我们可以得出一个用于判断iPhone和Android手机横竖屏模式的JavaScript函数...

    深入浅出理解JavaScript高级定时器原理与用法

    在上述代码中,`throttle`函数接收一个待节流的方法和上下文作为参数,每次触发`onresize`事件时,它会确保`resizeDiv`函数至少等待100毫秒后再执行,防止连续的窗口调整导致的性能问题。 总之,深入理解JavaScript...

    详解javascript高级定时器

    例如,当频繁地执行DOM操作时,为了减轻浏览器负担,我们可以使用节流来确保函数在一定时间内只执行一次。函数节流通过设置定时器,在上一次调用后的特定时间间隔后执行,如果在这期间再次调用,会重置定时器,从而...

    浅谈JavaScript函数节流

    函数节流的基本原理是通过设定一个时间间隔,在这个间隔内,即使函数被多次调用,也只会执行一次。当这个间隔过去后,如果函数再次被调用,才会执行下一次。这样可以确保函数不会过于频繁地执行,特别是在响应用户...

    关于div自适应高度/左右高度自适应一致的js代码

    1. 确保在页面加载时就执行一次自适应高度的计算,以避免初始加载时布局不正确的问题。 2. 在使用float布局时,若存在多个浮动元素,应确保它们能够自适应高度,否则可能会出现布局错乱。 3. 使用JavaScript进行DOM...

    JavaScript完全自学宝典 源代码

    8.9.html 多次打开输出流的效果。 8.10.html 使用write()方法生成页面。 8.11.html 使用writeln()方法生成文本并换行。 第9章(\c09) 示例描述:学习JavaScript中的window对象。 9.1.html 控制...

    VueJs监听window.resize方法示例

    // 使用IIFE防止多次绑定 (function() { window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth; })(); }; } ``` 3. **使用`watch`监听属性变化**: 创建一个`watch`监听...

    前端练习题 代码敲烂月薪过万.docx

    前端开发是构建Web应用的重要部分,主要负责用户与浏览器之间的交互。在前端领域,JavaScript是核心语言,它与HTML、CSS一起构成网页动态效果的基础。了解和熟练掌握JavaScript的基础知识,是成为一名月薪过万的前端...

    javascript学习笔记1

    文档片段是用于临时存放一组节点,以便一次性添加到文档中,可以提高性能。 - **访问和遍历DOM节点** - **单个节点** - `parentNode`:返回当前节点的父节点。 - `offsetParent`:返回包含当前元素的最近的定位父...

Global site tag (gtag.js) - Google Analytics