如何正确使用_.debounce？

Question

背景

假设您有一个应用程序，当您提出请求时会收到大量信息。在我关于餐馆的应用中，我想在每次收到包含几家餐馆的请求时计算所有菜单的平均价格：

var avg = menus => {
  const sum = menus.reduce( ( sum, currMenu ) => currMenu.price + sum , 0);
  console.log( sum / menus.length );
};

我们的解决方案

问题是我的应用程序开始滞后了这么多餐馆！解决方案？好吧，由于用户不关心每 0.001 毫秒更新一次的平均值，我们决定使用 debounce 来显示每 100 毫秒左右的更新平均值：

var debounceAvg = _.debounce( avg, 100 );

有关 debounce 工作原理的文章，请在此处阅读：

• https://css-tricks.com/debouncing-throttling-explained-examples/

问题

所以，现在我们有了一个去抖动功能。为了测试它，我有一个测试功能：

var myMenus = [ { price: 1 }, { price: 2 }, { price: 3 } ];

var timer = setInterval( params => {
    console.log("executing timer");
    debounceAvg(params);
}, 20, myMenus );

setTimeout( () => { clearInterval(timer) }, 5000);

此函数应每 100 毫秒将所有菜单的平均价格打印到日志中，即使它每 20 毫秒调用一次。但是，我最终只得到 2 个包含平均价格的日志——第一个和最后一个。

问题

我做错了什么？

Answer 1

您实际上是在 debounce 函数之外登录。因此，您的日志记录每次都在循环中发生。这就是为什么你得到所有这些零。 您可以在 debounce 函数中进行日志记录（您可以将其作为参数传入），或者检查循环中的更改。

这是将函数作为参数传递给测试的可能实现。我不确定我是否完全理解你在函数中的逻辑，但这至少应该让你开始：

var val = 0;
avg = function(menus, callback) {
  val = menus.reduce( ( sum, currMenu) => currMenu.price + sum , 0)) / menus.length;
  callback();
  return val;
}
var testDebounce = iterations => {
    const myMenus = [];
    for( let i = 0; i < iterations; i++ ) {
        myMenus.push( { price: i } );
        debounceAvg(aparts, function() {
          console.log(val);
        });
    }
};