`
tdb11039
  • 浏览: 3755 次
  • 性别: 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);

分享到:
评论

相关推荐

    div.onresize无效解决方案

    火狐下resize无效解决方案,解决火狐下资源resize事件无效问题方法

    【JavaScript源代码】vue使用echarts图表自适应的几种解决方案.docx

    使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦...

    react-window-resize-listener:触发窗口调整大小事件时,此React组件可用于执行一些任务

    React窗口调整大小侦听器触发窗口... npm install window-resize-listener-react --save用法如果要在多个组件中侦听窗口调整大小事件并基于该事件执行某些任务,则可以在多个组件中使用它。 import React from 'react';

    浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    方法一:在标签上加入 onLoad=”” onResize=”” 方法 写上对应的方法即可方法二:[removed]=function(){///…..} 在方法里面写上对应的代码即可着两种方法基本都可以解决你的问题了 代码如下: [removed]=...

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

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

    js动态添加onload、onresize、onscroll事件(另类方法)

    window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加。也就是说,它只能这样来(以 onload 为例,下同): 代码如下: [removed] = function() { // ...

    CSS40个布局实例

    window.onresize=function(){SetWidth()}; function SetWidth(){ if(!document.getElementById) return; var w=$("gallery").offsetWidth-20; if(w&gt;0 && w!=null){ $("intro").style.width=w+"px"; $("details")....

    超酷右下浮出广告窗口代码

    window.onresize = enetresizeDiv; window.onerror = function(){} var enetdivTop,enetdivLeft,enetdivWidth,enetdivHeight,enetdocHeight,enetdocWidth,enetobjTimer,i = 0; function enetgetMsg()

    JavaScript权威指南

    Window Control Methods Section 13.9. The Location Object Section 13.10. The History Object Section 13.11. Multiple Windows and Frames Chapter 14. The Document Object Section 14.1. ...

    debounce:防反跳功能。 对于实施仅应在重复操作完成后才发生的行为很有用

    onresize = debounce ( resize , 200 ) ; function resize ( e ) { console . log ( 'height' , window . innerHeight ) ; console . log ( 'width' , window . innerWidth ) ; } 若要稍后清除计时器并取消当前...

    javascript小技巧

    window.onresize=new Function("window.location.reload()") } function setmessage2(){ topmsg=new Layer(window.innerWidth) topmsg.bgColor=backgroundcolor regenerate2() topmsg.document.write(message) ...

    1.元旦倒计时代码展示

    function onResize(){ ww = canvas.width = window.innerWidth; wh = canvas.height = window.innerHeight; } ctx.strokeStyle = "red"; ctx.shadowBlur = 25; ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";...

    cskin 最小化报错 句柄无效

    cskin z最小化报错。 在 System.Drawing.BufferedGraphicsContext.CreateCompatibleDIB(IntPtr ... 在 System.Windows.Forms.NativeWindow.DebuggableCallback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

    1234.htmlyangzihang

    window.addEventListener("resize", () =&gt; this.onResize()); this.onResize(); this.updateBound = this.update.bind(this); requestAnimationFrame(this.updateBound); this.createSnowflakes(); } ...

    JS固定表头和左边列V2.0(源码)

    锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听(当触发 window.onresize时自动重新固定表头) 增加左边固定位置鼠标滚轮事件

    javascript 蛋糕商城 静态页面

    (1) 通过window.onresize监听窗口大小。 (2) 在页面小于630px时会显示汉堡包菜单。监听按下时显示菜单。 5. 登入注册 (1) 在按下登入(注册)按钮时会通过正则判断输入的格式是否正确,不正确则会提示对应错误。 6. ...

    原生HTML+CSS+ JS服装商城前台

    (1) 通过window.onresize监听窗口大小。 (2) 在页面小于630px时会显示汉堡包菜单。监听按下时显示菜单。 5. 登入注册 (1) 在按下登入(注册)按钮时会通过正则判断输入的格式是否正确,不正确则会提示对应错误。 6. ...

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

    用了[removed]但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法

    推拉门式菜单

    window.onresize=regenerate&quot;,400)}window.onload=regenerate2if (document.all){document.write(‘‘)themenu=document.all.slidemenubar2.stylerightboundary=0leftboundary=-150}else{themenu=document....

    debounce-fn:防抖功能

    onresize = debounceFn ( ( ) =&gt; {// Do something on window resize} , { wait : 100 } ) ;原料药debounceFn(输入,选项?) 返回一个去抖动的函数,该函数将延迟调用input函数,直到自上次调用该去抖动的函数...

Global site tag (gtag.js) - Google Analytics