使用Lodash节流封装Ajax调用的函数时无法触发目标方法

嘿，这问题很典型！你的节流操作没生效主要是两个小错误导致的：

• 函数声明顺序错误：你先调用了_.throttle(getPrice, 1000)，但此时getPrice还没被赋值（你用的是函数表达式var getPrice = function...，变量声明会提升，但函数体的赋值是在后面执行的），所以节流函数拿到的是undefined，自然不会生效。
• 未保留节流后的函数引用：就算顺序对了，你只是执行了_.throttle，但没把它返回的节流函数保存下来——之后你调用的还是原始的getPrice，压根没用到节流后的版本。

给你两个修正方案，选哪个都行：

方案一：先定义原函数，再替换为节流版本 #

// 先定义原始的getPrice函数
var getPrice = function getPrice() {
  $.ajax({
    // 你的API调用逻辑
  });
};

// 将节流后的函数重新赋值给getPrice，之后调用它就是节流版了
getPrice = _.throttle(getPrice, 1000);

// 调用节流后的函数
getPrice();

方案二：直接定义节流后的函数 #

// 一步到位，直接创建节流版的getPrice
var getPrice = _.throttle(function() {
  $.ajax({
    // 你的API调用逻辑
  });
}, 1000);

// 调用即可
getPrice();

另外要注意，如果是在事件监听（比如输入框的input事件）里使用这个函数，一定要确保绑定的是节流后的getPrice，而不是重新定义原函数哦！这样就能保证1秒内最多触发一次Ajax请求了。

内容的提问来源于stack exchange，提问作者raklos