JavaScript 中怎么处理 window 对象的 resize 事件防抖-js教程-PHP中文网

resize事件需防抖，因其在窗口拖拽时高频触发，易导致卡顿；通过settimeout清除重设定时器实现，延迟100–250ms执行，兼顾响应与性能，并需注意监听器与定时器的正确清理。

javascript 中怎么处理 window 对象的 resize 事件防抖

处理 window 的 resize 事件时，直接绑定回调会导致高频触发（尤其拖拽窗口时），影响性能。防抖（debounce）是常用解法：只在用户停止调整窗口尺寸一段时间后执行一次回调。

为什么 resize 需要防抖

浏览器在窗口大小变化过程中会连续触发 resize 事件，频率可能高达每秒数十次。若回调中涉及 DOM 操作、计算布局或发起请求，极易造成卡顿或重复渲染。防抖能确保逻辑只在“稳定”后运行一次，兼顾响应性与性能。

用 setTimeout 实现简易防抖

核心思路是每次触发时清除前一个定时器，重设新延时任务：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    console.log('窗口尺寸已稳定，执行逻辑');
    // ✅ 这里放你的实际处理代码，如更新布局、重绘 canvas 等
  }, 200); // 延迟 200ms，可根据需要调整
});

封装可复用的防抖函数

避免重复写定时器逻辑，推荐封装成通用函数：

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleResize = debounce(() => {
  console.log('宽：', window.innerWidth, '高：', window.innerHeight);
  // 例如：适配响应式图表、重设 grid 列数等
}, 150);

window.addEventListener('resize', handleResize);