更改时去抖

Question

我有一个材质 UI 文本字段，其中包含一个onChange. 这onChange，就拿来event执行函数了handleOnChange。handleOnChange在当前的实现中，每次更改时都会执行该函数event。

是否可以debounce直接在 2000ms 后执行该函数event？

我的文本字段

<TextField
  onChange={
    event =>
      handleOnChange(
      event.target.value,
      firstValue,
      secondValue,                            
    )
/>

我的功能

const handleOnChange = (value, firstValue, secondValue) => {
  ...do something..
}

我尝试了以下操作，但handleOnChange每次event更改时仍然会触发，而不是在 2000 毫秒后触发。

<TextField
  onChange={
    event =>
      _.debounce(handleOnChange(
      event.target.value,
      firstValue,
      secondValue,                            
    ), 2000)
/>

Answer 1

您将在每次事件调用时创建一个去抖实例。尝试创建一个去抖函数实例并在处理程序中使用它。像这样的东西：

const handleOnChange = _.debounce(change => {
  console.log(change);
}, 1000);

export default function App() {
  return (
    <div className="App">
      <input onChange={event => handleOnChange(event.target.value)} />
    </div>
  );
}