Lodash throttle函数无输出无报错，请求排查代码问题

兄弟，我一眼就瞅到问题所在了——你只创建了节流函数，但压根没执行它！ 而且还有个隐藏坑，就算执行了，你的写法也起不到真正的节流效果，容我慢慢给你掰扯清楚。

先看你原代码里的fu函数：

function fu(el) {
  th(el.value);
}

th(el.value)调用后返回的是Lodash throttle包装好的节流函数，但你这里只是获取了这个函数，没加()去执行它，自然不会有任何输出，也不会报错（因为创建节流函数本身是合法操作）。

就算你改成th(el.value)()，看似能输出，但又会遇到新问题：每次触发onkeypress事件，都会生成一个全新的节流函数实例，节流的计时是绑定在函数实例上的，所以每个新函数的计时都是独立的，等于完全没起到节流作用。

给你两个修正方案，先看最基础的（解决无输出问题，但是节流无效）：

function fu(el) {
  th(el.value)(); // 加个()执行节流函数
}

再看真正能实现节流效果的正确写法，核心是缓存节流函数实例，避免每次事件触发都新建：

<html>
<head>
<script src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.min.js"></script>
<script type="text/javascript">
// 提前创建并缓存节流函数，把参数放到调用时传递
const throttledLog = _.throttle((val) => {
  console.log(val);
}, 1000);

function fu(el) {
  // 直接调用缓存好的节流函数，传入当前输入值
  throttledLog(el.value);
}
</script>
</head>
<body>
<input onkeypress="fu(this)" />
</body>
</html>

为啥这个写法行？因为所有的事件触发都复用同一个节流函数实例，Lodash会在这个实例上维护节流的计时状态，这样才能保证1秒内不管触发多少次事件，只打印一次最新的输入值。

总结下你踩的两个坑：

• 忘记执行节流函数（只创建不调用）
• 每次事件触发都新建节流函数，导致节流规则失效

内容来源于stack exchange