jQuery窗口resize时宽度判断函数失效问题求助

嘿 Marco，我来帮你搞定这个resize事件失效的问题！你的代码在页面加载时正常，但resize时出问题，大概率是resize事件触发过于频繁导致的——浏览器在调整窗口大小的过程中会连续触发几十次resize事件，这时候你的函数可能在元素尺寸还没完全更新时就执行了，或者多次执行导致逻辑冲突。

下面是具体的修复方案：

1. 添加防抖（Debounce）函数 #

防抖可以让你的函数在resize事件停止触发一段时间后才执行，避免频繁执行带来的错误和性能问题。

// 先定义防抖函数
function debounce(func, delay = 250) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 修改你的事件绑定
$(window).on('load resize', debounce(function () {
  const windowWidth = $(window).width();
  
  if (windowWidth >= 769) { 
    // 缓存DOM元素，避免重复查找提升性能
    const $element = $('#cont_quote');
    const $follow = $element.find('.img_quote');
    const followHeight = $follow.outerHeight();
    
    // 这里放你的height计算和后续逻辑...
  } else {
    // 重要：添加else分支，窗口小于769px时重置状态
    const $follow = $('#cont_quote .img_quote');
    $follow.css({
      // 比如重置之前设置的top/left等样式，避免残留问题
      top: 'auto',
      left: 'auto'
    });
  }
}, 250));

2. 确保读取最新的元素尺寸 #

如果防抖后还是有问题，可能是浏览器还没完成元素重绘就读取了高度，这时候可以用requestAnimationFrame延迟执行逻辑，确保拿到最新的尺寸：

$(window).on('load resize', debounce(function () {
  const windowWidth = $(window).width();
  
  if (windowWidth >= 769) { 
    requestAnimationFrame(() => {
      const $element = $('#cont_quote');
      const $follow = $element.find('.img_quote');
      const followHeight = $follow.outerHeight();
      
      // 你的逻辑代码...
    });
  } else {
    // 重置逻辑...
  }
}, 250));

额外检查点 #

• 确认#cont_quote和.img_quote在resize过程中没有被其他代码动态移除或修改结构；
• 如果你的769px是包含滚动条的宽度，可以改用window.innerWidth代替$(window).width()（后者返回不含滚动条的视口宽度）。

内容的提问来源于stack exchange，提问作者Marco