jquery如何解决resize执行两次的问题
作者：暖阳 (*◎ｖ◎*)
这篇文章主要介绍了jquery如何解决resize执行两次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
jquery解决resize执行两次问题
代码如下（示例）：
// - 解决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);
});扩展Jquery的resize方法
（原生的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);
}
});
};总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。