Question

如果我有一个功能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} );

Answer 1

不熟悉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);

Answer 2

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

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

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

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

去除除了最后一次使用lodash之外的所有调用的debounce

2 个答案: