jquery如何解决resize执行两次的问题

 更新时间:2023年07月04日 14:07:45   作者:暖阳 (*◎v◎*)  
这篇文章主要介绍了jquery如何解决resize执行两次的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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);
? ? ? ? ? ?}
? ?});
};

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

最新评论

?


http://www.vxiaotou.com