JS 项目中高频触发的调整大小怎么通过节流控制-js教程-PHP中文网

resize事件应使用节流而非防抖，因其需在调整过程中持续响应（如实时更新图表尺寸），而防抖仅最后执行一次会丢失中间状态；节流可每100ms稳定执行一帧，兼顾响应性与性能。

js 项目中高频触发的调整大小怎么通过节流控制

窗口 resize 事件在拖拽调整浏览器大小时会高频触发，不加控制容易导致重排重绘、布局计算或 API 请求堆积，引发卡顿甚至内存泄漏。节流（throttle）是更合适的选择——它确保函数在固定时间间隔内最多执行一次，兼顾响应性与性能。

为什么 resize 用节流比防抖更合理

resize 不像搜索输入那样“等用户停手再处理”，而是需要在调整过程中保持一定频率的响应（比如实时更新图表尺寸、切换导航栏状态）。防抖只在最后执行一次，可能错过中间关键状态；节流则能稳定输出，例如每 100ms 执行一帧，既不卡顿，也不过载。

手写一个轻量节流函数

基于时间戳判断，简洁可靠：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

function throttle(fn, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

使用方式：

const handleResize = throttle(() => {
  console.log('窗口尺寸：', window.innerWidth, 'x', window.innerHeight);
  // 更新图表、适配栅格、重设 canvas 尺寸等
}, 100);
<p>window.addEventListener('resize', handleResize);</p>

实际项目中的关键注意点

延迟值选 100–16ms 之间较稳妥：100ms 感知不明显且压力小；16ms 接近 60fps，适合动画级响应
务必在页面卸载前移除监听，避免内存泄漏：window.removeEventListener('resize', handleResize)
如果需兼容旧版 Safari 或 iOS WebKit，可补充 window.orientationchange 监听，因为某些设备旋转时不触发 resize
对纯 CSS 响应式布局无 JS 依赖的场景，可减少 JS 节流逻辑，优先用 matchMedia 监听断点变化，更精准也更轻量