插件窝 干货文章 jquery如何解决resize执行两次的问题

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

resizeDom callback resize function 956    来源:    2024-10-11

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

总结

以上为个人经验,希望对您有所帮助。