从节流函数内部调用类方法时节流不起作用

Question

我有这个限制文本输入的代码，但我也希望它限制一个方法调用，该方法调用似乎正在阻止文本限制工作。

import { throttle } from 'lodash';
...
      <input
        type="text"
        onChange={(e): void => throttledTextInput(e.target.value)}
        style={{ outline: 'none' }}
      />
...
  const throttledTextInput = throttle((text) => handleThrottledText(text), 1000);
...
  const handleThrottledText = (text: string): void => {
    console.log(text); // without the below two lines it works fine
    const textInputMessage: Array<Action> = [];
    // but when calling the below, the throttling stops working and it 
  };

我该如何解决这个问题？

Answer 1

我假设这是在一个功能组件中，因此每次重新渲染组件时都会创建 throttledTextInput，从而破坏它的行为。我猜messagingController.dispatchActions 会导致您的组件重新渲染。

const throttledTextInput = useRef(throttle(handleThrottledText, 1000));

const handleThrottledText = (text: string): void => {
  console.log(text);
};

useRef 只会创建一次节流函数，您可以使用相同的模式进行去抖动等。

这样称呼它：throttledTextInput.current('calling throttled func with this text')。

如果您的限制函数具有依赖项，则需要声明它们，以便在它们发生变化时重新创建函数。但要小心，如果受限制的回调本身改变了依赖关系，它将中断，因为函数将不断重新创建。对于这个 useCallback 是一个更合适的钩子：

const throttledTextInput = useCallback(
  throttle(text => {
    console.log('called throttle with', text, props.dispatchMessages);
  }, 1000),
  [props.dispatchMessages]
);

与useRef 不同，您只需使用throttledTextInput('some text') 调用它。