变化时去抖动

Question

我有一个 Material UI 包含 onChange 的文本字段。这个 onChange，获取 event 并执行函数 handleOnChange。使用当前的实现，函数 handleOnChange 每次 event 更改时都会执行。

是否可以直接在event上使用debounce执行2000ms后的函数？

我的文本框

<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

问题是您将 handleOnChange() 函数的结果传递给去抖动，而不是对该函数的引用。

试试像这样的东西：

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

Answer 2

您正在为每个事件调用创建一个去抖动实例。尝试创建一个 debounced 函数实例并在您的处理程序中使用它。像这样：

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

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

变化时去抖动

Debounce onChange

javascript

onchange

reactjs

debounce