jquery如何解决resize执行两次的问题
更新时间:2023年07月04日 14:07:45 作者:暖阳 (*◎v◎*)
这篇文章主要介绍了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); } }); };
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果等等,以下为所有代码,感兴趣的朋友可以练练手哈,希望对大家学习有所帮助2013-07-07使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
首先,重写Ajax方法的代价太高,仍然可以利用jQuery自身的Ajax Events。2010-12-12解决jQuery uploadify在非IE核心浏览器下无法上传
之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传。经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie,不共享session。2015-08-08jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts实现的2D回归直线散点效果,结合实例形式分析了jQuery基于HighCharts插件绘制直线散点图形的具体相关操作步骤与实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现2010-04-04
最新评论