`
tdb11039
  • 浏览: 3836 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

window.onresize多次执行的解决方法

阅读更多

/**
* window.onresize 事件 专用事件绑定器 v0.1 Alucelx
* http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html <description>
* 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG. </description>
* <methods> add: 添加事件句柄 remove: 删除事件句柄 </methods>
*/
var onWindowResize = function() {
// 事件队列
var queue = [], indexOf = Array.prototype.indexOf || function() {
var i = 0, length = this.length;
for (; i < length; i++) {
if (this[i] === arguments[0]) {
return i;
}
}
return -1;
};
var isResizing = {}, // 标记可视区域尺寸状态, 用于消除 lte ie8 / chrome 中
// window.onresize 事件多次执行的 bug
lazy = true, // 懒执行标记
listener = function(e) { // 事件监听器
var h = window.innerHeight
|| (document.documentElement && document.documentElement.clientHeight)
|| document.body.clientHeight, w = window.innerWidth
|| (document.documentElement && document.documentElement.clientWidth)
|| document.body.clientWidth;
if (h === isResizing.h && w === isResizing.w) {
return;
} else {
e = e || window.event;
var i = 0, len = queue.length;
for (; i < len; i++) {
queue[i].call(this, e);
}
isResizing.h = h, isResizing.w = w;
}
}
return {
add : function(fn) {
if (typeof fn === 'function') {
if (lazy) { // 懒执行
if (window.addEventListener) {
window.addEventListener('resize', listener, false);
} else {
window.attachEvent('onresize', listener);
}
lazy = false;
}
queue.push(fn);
} else {
}
return this;
},
remove : function(fn) {
if (typeof fn === 'undefined') {
queue = [];
} else if (typeof fn === 'function') {
var i = indexOf.call(queue, fn);
if (i > -1) {
queue.splice(i, 1);
}
}
return this;
}
};
}.call(this);

// 绑定window 的 resize 事件,请使用这个对象
// 示例:
// 复制代码 代码如下:

var _fn = function() {
document.body.innerHTML += "1"
};
onWindowResize.add(_fn).add(function() {
document.body.innerHTML += "2"
}).add(function() {
document.body.innerHTML += "3"
}).remove(_fn);

分享到:
评论

相关推荐

    在IE浏览器中resize事件执行多次的解决方法

    在这个例子中,当窗口大小改变时,resize事件被触发,但实际的`changeHeight()`函数将在500毫秒后执行,如果在这段时间内又有新的resize事件触发,之前的定时器会被清除,从而避免了函数的多次执行。 然而,这种...

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

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

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

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

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

    这样可以确保在`onresize`事件频繁触发时,我们依然能够有效地控制函数的执行,避免因为多次执行导致的性能问题。 下面是一个简单的防抖函数实现: ```javascript var debounce = function (func, threshold, ...

    VueJs监听window.resize方法示例

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

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

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

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

    然而,在Internet Explorer(IE)浏览器中,`window.onresize`事件存在一个已知的bug:它可能会被多次执行,甚至导致死循环,从而严重影响浏览器性能,造成浏览器卡死。这种问题通常发生在处理窗口大小改变的回调...

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

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

    JavaScript完全自学宝典 源代码

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

    javascript学习笔记1

    - `window.onresize`:页面大小改变时触发。 以上就是关于JavaScript中的数组方法、DOM操作和BOM的基本知识点介绍。这些知识点对于前端开发人员来说非常重要,掌握它们可以帮助开发者更好地编写动态网页和Web应用...

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

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

    原生javascript实现图片弹窗交互效果

    在JavaScript中,当我们需要声明多个变量时,通常会一次性声明它们,而不是为每个变量单独写一个`var`关键字。例如: ```javascript var sScrollTop = document.body.scrollTop || document.documentElement....

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

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

    nb-window:用于检测窗口和文档尺寸的 AngularJS 服务

    5. `debounce(func, wait)`:防抖函数,确保在连续的窗口大小改变事件中,回调函数只在停止改变一段时间后执行一次,提高性能。 在实际应用中,nb-window 可能会与 AngularJS 的 `$scope.$apply` 或 `$timeout` ...

    详解javascript高级定时器

    window.onresize = function() { throttle(resizeDiv); }; ``` 在处理周期性事件,如窗口resize、scroll等,使用函数节流可以显著提高性能,因为它限制了连续执行的次数,减轻了浏览器的负担,同时对用户体验的...

    浅谈JavaScript函数节流

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

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

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

    vue中echarts图表大小适应窗口大小且不需要刷新案例

    - 实现一个定时器,每隔一定时间就执行一次图表尺寸调整的方法,这种方法虽然可以起到作用,但并不推荐使用,因为它会造成性能损耗,且可能会在图表尺寸未发生变化时也执行调整。 - 使用element-resize-detector库...

Global site tag (gtag.js) - Google Analytics