如何使用jQuery动态重执行函数？实现窗口resize时更新元素左外边距

这问题我之前做页面适配时也碰到过，核心就是把重复执行的计算逻辑抽成独立函数，然后同时绑定到文档加载完成和窗口大小变化两个时机上就行。给你修改后的代码：

$(document).ready(function(){ 
  // 把计算并更新外边距的逻辑封装成独立函数
  function updateHeroMargin() {
    var docwidth = $(document).width(); 
    var herowidth = $('.element-hero').width(); 
    var leftmargin = docwidth - herowidth; 
    $('.element-hero').css({ "margin-left": -leftmargin }); 
  }

  // 页面初始加载时先执行一次，保证初始状态正确
  updateHeroMargin();

  // 给窗口绑定resize事件，每次调整大小都重新计算更新
  $(window).on('resize', updateHeroMargin);
});

额外优化：添加防抖函数（可选但推荐） #

窗口resize事件会在拖动窗口时连续触发很多次，频繁执行DOM计算可能会有轻微的性能损耗。可以加个防抖函数，让计算逻辑在窗口停止调整后再执行，比如延迟100毫秒，既保证响应及时，又减少不必要的计算：

$(document).ready(function(){ 
  function updateHeroMargin() {
    var docwidth = $(document).width(); 
    var herowidth = $('.element-hero').width(); 
    var leftmargin = docwidth - herowidth; 
    $('.element-hero').css({ "margin-left": -leftmargin }); 
  }

  // 防抖工具函数：延迟执行目标方法，避免频繁触发
  function debounce(func, delay) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(func, delay);
    };
  }

  // 初始加载执行
  updateHeroMargin();

  // 绑定带防抖的resize事件处理逻辑
  $(window).on('resize', debounce(updateHeroMargin, 100));
});

这样修改后，不管是页面刚加载完成，还是用户拖动窗口调整大小，.element-hero的左外边距都会自动重新计算并更新啦。

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