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

【问题标题】：debounce with ignoring all calls except the last using lodashdebounce 忽略所有调用，除了最后一个使用 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。重新渲染创建了多个去抖动实例。通过将功能移出组件来修复。你救世主✌️????

标签： javascript debouncing

【解决方案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 来减轻项目中的单元测试，然后增加覆盖率。