如何正确使用_.debounce？

Question

背景

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

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

我们的方案

问题是我得到了那么多的餐馆，我的应用程序开始滞后！解决办法？好吧，因为用户不想每隔0.001毫秒查看一次更新的平均值，所以我们决定每隔100毫秒左右用借记符显示一次更新平均值：

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

关于“退欧”工作方式的文章，请在这里读一读：

• 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 is将所有菜单的avg价格打印到日志中，即使它每20 is被调用一次。然而，我最后只有两个日志包含avg的价格-第一个和最后一个。

问题

我做错什么了？

Answer 1

您实际上是在退出函数之外进行日志记录。所以每次循环你的日志记录都会发生。这就是为什么你要得到所有的零。您可以在卸载函数中进行日志记录(可以将其作为参数传入)，也可以检查循环中的更改。

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

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);
        });
    }
};