javascript - 通过忽略除最后一次使用 lodash 之外的所有调用来消除抖动

Question

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

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

使用 lodash 延迟连续函数调用(去抖动)效果很好。

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

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

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

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

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

Answer 1

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

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

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

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