/**
* window.onresize event dedicated event binder v0.1 Alucelx
* http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html
* < description>
* Used to solve the bug that the native window.resize event may be executed multiple times in lte ie8 & chrome and other situations.
*
*
* add: add event handler
* remove: delete event handler
*
*/
var onWindowResize = function (){
//Event queue
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 = {}, //Mark the size status of the visible area, used to eliminate the bug of multiple executions of the window.onresize event in lte ie8/chrome
lazy = true, / /Lazy execution mark
listener = function(e){ //Event listener
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){ //Lazy execution
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);
Bind the window's resize event, please use this object
Example:
var _fn = function(){document.body.innerHTML = "1"};
onWindowResize.add(_fn)
.add(function(){document .body.innerHTML = "2"})
.add(function(){document.body.innerHTML = "3"})
.remove(_fn);