代码如下(示例):
// - 解决resize执行两次的问题
var n = 0;
jQuery(window).resize(function () {
n++;
if (n % 2 == 0) {
n = 0;
//todo
// console.log("todo");
}
// console.log(n);
});谷歌浏览器在测试时,当窗口发生改变时,resize()函数有时会执行一次,有时会执行两次,所以改进为下面代码。
var resizeTimer = null;
jQuery(window).resize(function () {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
// console.log("窗体发生改变了");
//todo
}, 100);
});(原生的resize只针对window,因项目需要扩展了此方法,目前只在DIV上使用过,后续如果修改代码会对此代码进行更新)
/**
* 封装非Window对象的resize方法
* callback:回调函数(长宽发生变化时触发)
*/
$.fn.divResize=function(callback, setting){
var cycleTime = 250; // 定义监控大小变化的时间
if(setting&&setting.cycleTime){
cycleTime = setting.cycleTime;
}
if(callback==undefined||callback==null){
return;
}
if(!(typeof callback == "function")){
return;
}
$(this).each(function(){
var resizeDom = this;
resizeDom.data = {};
resizeDom.data.width = $(resizeDom).css("width"); // 存放当前宽度
resizeDom.data.height = $(resizeDom).css("height"); // 存放当前高度
resizeDom.callback = callback;
// 定义监控函数
var resizeMonitor = function(){
// 判断高度和宽度是否发生变化
if($(resizeDom).css("width")!=resizeDom.data.width||$(resizeDom).css("height")!=resizeDom.data.height){
resizeDom.data.width = $(resizeDom).css("width");
resizeDom.data.height = $(resizeDom).css("height");
resizeDom.callback();
}
var callFunc = arguments.callee; // 获取本身函数
setTimeout(function(){callFunc();}, cycleTime);
};
resizeMonitor();
});
};/**
* 扩展resize方法(可支持window和非window对象)
* callback:回调函数(长宽发生变化时触发)
*/
$.fn.resizeOld = $.fn.resize;
$.fn.resize=function(callback, setting){
$(this).each(function(){
var resizeDom = this;
// 确定绑定的对象是否是window
if (this == window) {
$(window).resizeOld(function () {
callback();
});
} else {
resizeDom.callback = callback;
$(this).divResize(callback, setting);
}
});
};以上为个人经验,希望对您有所帮助。