debounce 忽略所有调用，除了最后一个使用 lodash

Posted 2023-02-22

【中文标题】debounce 忽略所有调用，除了最后一个使用 lodash

【英文标题】：debounce with ignoring all calls except the last using lodash

【发布时间】：2018-04-23 05:17:12

【问题描述】：

如果我有一个函数foo。它在短时间内接到许多电话。

function foo(name) 
  console.log(`Hi $name, it is now: `, new Date());

使用 lodash 延迟连续的函数调用（去抖动）可以正常工作。

   const debouncedFoo = _.debounce(foo, 1000 );

但是，我的目标是即使超时 (1000) 已过也不执行这整个调用队列，并考虑 仅 最后一次调用 被执行.

换句话说，如果我在 900 毫秒内调用了 debouncedFoo 5 次（小于“等待参数”1000 毫秒），我希望 foo 只执行一次，这是最后一次 (5ᵗʰ) 调用。

阅读 lodash 文档，我了解到 debounce 被选项的 3ʳᵈ 参数重载。我使用了它们，但没有发生预期的行为：

   // first attempt
  const debouncedFoo = _.debounce(foo, 1000, leading: true );
  // second attempt
  const debouncedFoo = _.debounce(foo, 1000, trailing: false );

【问题讨论】：

那不是你想要的吗？ lodash.com/docs/#throttle

已经有一段时间了，但是对于其他任何人（比如我）来说，偶然发现了这一点 - 有时可以忽略的事情是在每次状态更改时意外地重新创建 debounced 函数。

光荣的评论@AndyO。在我的情况下确实如此 - 我在反应组件中使用 debounce。重新渲染创建了多个去抖动实例。通过将功能移出组件来修复。你救世主✌️????

【参考方案1】：

就像@AndyO 提到的那样，确保您没有在每次状态更改时重新创建去抖函数。

我也遇到了同样的问题，所以我用useCallback解决了。

import React,  useCallback  from 'React';
import  debounce  from 'lodash';

const myFunction = () =>  // some logic ;
const debouncedMyFunction = useCallback(debounce(myFunction, 300), []);

【参考方案2】：

不熟悉 lodash，但您可以轻松实现该行为：

function debounce(cb, duration) 
  let timer;
  return (...args) => 
    clearTimeout(timer);
    timer = setTimeout(() => 
      cb(...args);
    , duration);
  ;

function debounce(cb, duration) 
  var timer;
  return function() 
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() 
      cb.apply(null, args);
    , duration);
  ;


var call = debounce(console.log.bind(console), 1000);
setTimeout(function() call(200); , 200);
setTimeout(function() call(400); , 400);
setTimeout(function() call(600); , 600);
setTimeout(function() call(800); , 800);
setTimeout(function() call(900); , 900);

【讨论】：

谢谢，我已经实现了类似的东西，但是，我想利用 lodash 来减轻项目中的单元测试，然后增加覆盖率。