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

有关如何去抖动的文章请阅读：

stack overflow post

问题

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

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

如何正确使用_.debounce？

背景

我们的解决方案

问题

问题

1 个答案: