JavaScript如何实现resize事件仅在窗口宽/高单独变化时触发

你目前自己实现的比对旧值的方案已经是最优解了，完全不需要担心内存问题：仅存储一个数值类型的窗口宽度变量，内存开销只有几字节，完全可以忽略不计，相比其他复杂实现，这个方案的执行性能和内存占用都是最好的。

浏览器本身没有提供单独的窗口宽度/高度变化事件，所有类似需求的底层都是基于resize事件做维度比对，不存在比这个更轻量化的实现方式。

如果想要封装成通用工具方便复用，也可以参考下面的封装实现，支持任意监听宽度或高度变化：

// 通用单一维度resize监听生成函数，type传入'width'监听宽度，传入'height'监听高度
function createDimensionResizeHandler(type, callback) {
  // 存储初始对应维度的尺寸
  let lastDimension = window[`inner${type.charAt(0).toUpperCase() + type.slice(1)}`];
  return () => {
    const currentDimension = window[`inner${type.charAt(0).toUpperCase() + type.slice(1)}`];
    if (currentDimension !== lastDimension) {
      lastDimension = currentDimension;
      callback();
    }
  }
}

// 使用示例：监听宽度变化执行逻辑
window.addEventListener('resize', createDimensionResizeHandler('width', () => {
  executeMyDesiredCode();
}))

如果你的项目里已经引入了jQuery，也可以把原生的尺寸获取和事件绑定替换成对应的jQuery方法，逻辑完全一致。

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