lodash debounce 在匿名函数中不起作用

正如 Palpatim 解释的那样，原因在于 _.debounce(...) 返回一个函数，该函数在被调用时会发挥作用。

因此，在您的 #anonFunction 示例中，您有一个键侦听器，它在被调用时只向调用者返回一个函数，它对来自事件侦听器的返回值不做任何事情。

这是 _.debounce(...) 定义的片段：

_.debounce
function (func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      if (immediate && !timeout) func.apply(context, args);
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  } 

您的关键事件侦听器必须调用 _.debounce(...) 的返回函数，或者您可以像在非匿名示例中那样做，并将 _.debounce(...) 调用的返回函数用作您的事件侦听器。

想得更轻松

_.debounce 返回一个去抖函数！因此，而不是考虑

$el.on('keyup'), function(){
   _.debounce(doYourThing,500); //uh I want to debounce this
}

您宁愿调用 debounced 函数

var doYourThingDebounced = _.debounce(doYourThing, 500); //YES, this will always be debounced

$el.on('keyup', doYourThingDebounced);

debounce 不执行该函数，它返回一个内置去抖动功能的函数。

Returns (Function)：返回新的去抖动函数。

因此，您的 #function 处理程序实际上是在做正确的事情，方法是返回一个供 jQuery 用作 keyup 处理程序的函数。要修复您的 #noReturnAnonFunction 示例，您只需在函数的上下文中执行 debounced 函数：

$('#noReturnAnonFunction').on('keyup', function () {
    _.debounce(debounceIt, 500, false)(); // Immediately executes
});

但这会在你的 debounce 周围引入一个不必要的匿名函数包装器。

您可以像这样返回 debounce 函数：

(function(){
    var debounce = _.debounce(fireServerEvent, 500, false);

    $('#anonFunction').on('keyup', function () {
        //clear textfield
        $('#output').append('clearNotifications<br/>');
        return debounce();
    });

    function fireServerEvent(){
        $('#output').append('serverEvent<br/>');
    }
})();

在寻找通过尾随调用调用去抖动的解决方案时遇到了这个问题，发现这篇文章确实对我有帮助：https://newbedev.com/lodash-debounce-not-working-in-react 特别是：

对于那些因为油门/去抖不起作用而来到这里的人的解决方案 >with FunctionComponent - 您需要通过 useRef() 存储去抖函数：

export const ComponentName = (value = null) => {
  const [inputValue, setInputValue] = useState(value);

  const setServicesValue = value => Services.setValue(value);

  const setServicesValueDebounced = useRef(_.debounce(setServicesValue, 1000));

  const handleChange = ({ currentTarget: { value } }) => {
    setInputValue(value);
    setServicesValueDebounced.current(value);
  };

  return <input onChange={handleChange} value={inputValue} />;
};

更一般地说，如果你想要一个带有尾随行为的去抖动（考虑最后一次点击，或者更有可能是选择输入的最后一次更改），以及第一次点击/更改的视觉反馈，你将面临同样的问题。

这不起作用：

$(document).on('change', "#select", function() {
    $('.ajax-loader').show();
    _.debounce(processSelectChange, 1000);
});

这将是一个解决方案：

$(document).on('change', "#select", function() {
    $('.ajax-loader').show();
});
$(document).on('change', "#select", _.debounce(processSelectChange, 1000));