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实现仿淘宝套餐选择插件

    本文给大家介绍的是一款基于jQuery实现放淘宝套餐选择的插件,主要是基于本地json数据的选择列创建,有需要的小伙伴参考下。
    2015-03-03
  • jquery实现简单的全选和反选功能

    jquery实现简单的全选和反选功能

    我们在做项目的时候,经常需要实现全选和反选功能,到网上搜了一圈,发现网上写的全选的代码,不是完整的,是有bug的。下面结合自己的项目给大家分享下。
    2016-01-01
  • 使用jquery插件实现图片延迟加载技术详细说明

    使用jquery插件实现图片延迟加载技术详细说明

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。
    2011-03-03
  • jquery读写cookie操作实例分析

    jquery读写cookie操作实例分析

    这篇文章主要介绍了jquery读写cookie操作,结合实例形式分析了jQuery针对cookie的常用读写操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery中parent()方法用法实例

    jQuery中parent()方法用法实例

    这篇文章主要介绍了jQuery中parent()方法用法,实例分析了parent()方法的功能、定义及取得紧邻父元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery实现为动态添加的元素绑定事件实例分析

    jQuery实现为动态添加的元素绑定事件实例分析

    这篇文章主要介绍了jQuery实现为动态添加的元素绑定事件,结合实例形式分析了jQuery常见的事件绑定相关操作技巧与注意事项,需要的朋友可以参考下
    2018-09-09
  • jcarousellite.js 基于Jquery的图片无缝滚动插件

    jcarousellite.js 基于Jquery的图片无缝滚动插件

    基于Jquery的图片无缝滚动插件,需要的朋友可以参考下。
    2010-12-12
  • 基于jQuery的自动完成插件

    基于jQuery的自动完成插件

    感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。需要的朋友可以参考下。
    2011-02-02
  • 创建自己的jquery表格插件

    创建自己的jquery表格插件

    这篇文章主要介绍了一个自己创建的jquery表格插件,实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery简单注册和禁用全局事件的方法

    jQuery简单注册和禁用全局事件的方法

    这篇文章主要介绍了jQuery简单注册和禁用全局事件的方法,结合实例形式分析了jQuery中ajaxStart与ajaxStop方法的使用技巧,需要的朋友可以参考下
    2016-07-07

最新评论