js节流函数优化方案

2026-05-15 07:00:34 1666阅读 0评论

节流函数别只会抄 Lodash，这 3 个优化点才是关键

前端开发中，监听 scroll 或 resize 事件是再常见不过的操作。但稍不注意，控制台日志就会像刷屏一样疯狂跳动，导致页面掉帧、手机发烫。这时候，节流（Throttle）技术就登场了。

很多同事习惯直接甩出一段网上抄的 demo，或者无脑依赖 lodash。看似解决了性能问题，实则可能埋下了 this 指向错误、内存泄漏甚至交互体验不佳的隐患。今天咱们不聊枯燥的定义，只谈如何在实际业务中写出既稳健又灵活的节流方案。

时间戳精度是底线

最基础的节流逻辑，很多人喜欢用闭包配合 setTimeout 延时执行。这有个隐藏坑：多次调用时的累积误差。如果每次执行都基于上一次 setTimeout 的时间戳计算，随着程序运行，时间会慢慢漂移，导致节流间隔不准确。

更严谨的做法是直接对比当前系统时间。

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

这段代码的核心在于 now - lastTime。通过记录上一次真正执行的时间点，下一次触发时只需判断时间差是否达标。这种方法没有累积误差，能保证在高频触发下，函数执行的间隔始终接近预设的 wait 值。

别忘了“上下文”和“参数”

写到这里，你会发现上面的代码在处理复杂场景时会露怯。如果在 React 类组件中，this 指向可能会乱；如果在传递多个参数的方法里，参数容易丢失。

解决方式是在内部调用时使用 apply 而不是简单调用。

保留 this 绑定至关重要。有些开发者为了代码简洁写成箭头函数，虽然解决了外层 this，但在被调用的函数内部如果需要访问特定对象属性时，仍需谨慎处理。确保 func.apply(thisContext, args) 这一行存在，就能保证原函数的执行环境不被篡改。特别是当节流函数被赋值给 DOM 事件监听器时，this 通常指向 DOM 元素，若未显式绑定，原本逻辑中的状态查找就会失效。

灵活控制“头尾”执行时机

默认情况下，上面实现的节流只在尾部执行，即触发停止后才会最后一次执行。这在某些交互场景下并不友好。

比如搜索输入框防抖需要尾部执行，避免频繁查库；但地图拖拽时的坐标更新，用户希望手指一按就能看到反馈，这就属于头部执行的需求。

成熟的优化方案应当允许配置执行策略。你可以增加一个布尔参数，判断是否在第一次触发时立即运行一次：

// 伪代码示意
if (leading && !lastTime) {
  lastTime = now;
  func.apply(this, args);
} else if (!lastTime) { // 等待首次执行后的冷却期
  lastTime = now; 
  func.apply(this, args);
}

这样既能满足即时响应需求，又能防止在短时间内重复触发造成性能抖动。根据业务需求权衡是“先快后稳”还是“等稳定后再输出”，能让用户体验提升一个台阶。