javascript - 如何正确使用_.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 );

有关去抖如何工作的文章，请阅读此处:

• 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 函数中进行日志记录(您可以将其作为参数传递)，或者检查循环中的变化。

这是将您的函数作为参数传入以进行测试的可能实现。我不确定我是否完全理解您在函数中的逻辑，但这至少应该让您入门:

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