JavaScript 实现节流函数最佳实践

实现节流函数说难不难，说简单也不简单。会用只要十分钟，用好却需要一些经验积累。本文把这些经验浓缩成几个要点，帮你少走弯路。

实现节流函数为什么值得花时间学？

实现节流函数说难不难，说简单也不简单。会用只要十分钟，用好却需要一些经验积累。本文把这些经验浓缩成几个要点，帮你少走弯路。

关于实现节流函数的关键知识

• 写实现节流函数相关代码时，变量命名要能自解释，别用 a、b、c 这类名字。
• 养成查阅官方文档的习惯，第三方教程里的实现节流函数用法可能已经过时。
• 团队协作中，实现节流函数的用法约定要写进开发规范，避免各写各的。
• 给实现节流函数相关的核心逻辑写单元测试，改动时才敢放手重构。
• 了解实现节流函数的返回值约定，尤其是失败时返回什么，别让异常悄悄溜过。

有了这些铺垫，实现实现节流函数就不复杂了。

实现节流函数代码实战

参考下面的实现（节流 throttle 实现）：

function throttle(fn, wait = 200) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(this, args);
    }
  };
}
window.addEventListener('scroll', throttle(() => console.log('scroll'), 200));

容易踩的坑

1. 中文乱码问题十有八九和编码有关，统一使用 UTF-8 能避开大部分坑。
2. 遇到并发问题先怀疑共享状态，全局变量是重灾区。
3. 复杂问题拆成小问题逐个验证，比一次性调一大段效率高得多。
4. 正则表达式写完要多测几个边界用例，贪心和转义最容易出错。

收尾

希望这篇文章能帮你少走一些弯路。实现节流函数这个话题还有更深的内容可以挖，我们留到以后再聊。

---

遇见问题加 QQ23979811 协助处理