如何利用jQuery在窗口Resize时同步更新Div与表格的宽度比例？

你的问题很典型——初始加载时的计算逻辑只跑了一次，窗口大小变化后没有重新触发计算，所以div的宽度才会保持不动。咱们可以把宽度计算的逻辑封装成一个独立函数，然后让它在页面加载和窗口resize时都执行，同时加个防抖优化性能，避免频繁计算拖慢页面。

修改后的代码示例 #

$(document).ready(function() {
  // 把宽度更新逻辑封装成可复用的函数
  function updateFactsWidth() {
    // 计算表格宽度，除以3后转成px单位
    var tableWidth = $('#myTable').width();
    var factsWidth = (tableWidth / 3) + "px";
    // 给.facts元素设置宽度
    $('.facts').css("width", factsWidth);
  }

  // 页面刚加载时先执行一次，确保初始宽度正确
  updateFactsWidth();

  // 监听窗口resize事件，加上防抖避免频繁触发
  var resizeTimer;
  $(window).on('resize', function() {
    // 每次resize触发时先清除之前的延迟定时器
    clearTimeout(resizeTimer);
    // 延迟250毫秒执行更新逻辑，可根据需求调整这个时间
    resizeTimer = setTimeout(updateFactsWidth, 250);
  });
});

几点说明 #

1. 封装函数：把重复执行的逻辑抽成函数，不管是初始加载还是resize都能调用，避免代码冗余。
2. 防抖处理：窗口resize事件会在拖动过程中频繁触发（每秒可能几十次），加个延迟定时器可以让计算逻辑只在用户停止拖动窗口250毫秒后执行，减少不必要的DOM操作，提升页面性能。
3. 变量规范：你之前重复声明了var abc三次，虽然JS不会报错，但这样写不够规范，修改后的代码用不同变量名区分不同阶段的数值，可读性更好。

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