Javascript 反应本机：使用lodash debounce

我在玩React Native和lodash的debounce

使用以下代码只能使其像延迟一样工作，而不是去抖动

<Input
 onChangeText={(text) => {
  _.debounce(()=> console.log("debouncing"), 2000)()
 }
/>

{
_.debounce（（）=>console.log（“去抖动”），2000）（）
}
/>

---

如果我输入像“foo”这样的输入，我希望控制台只记录一次去抖动。现在它记录了3次“debounce”。

debounce函数应该在render方法之外的某个地方定义，因为每次调用它时，它必须引用函数的同一个实例，而不是像现在将它放入

onChangeText

处理程序函数时那样创建新实例

定义去盎司函数最常见的位置就是组件的对象上。下面是一个例子：

class MyComponent extends React.Component {
  constructor() {
    this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
  }

  onChangeText(text) {
    console.log("debouncing");
  }

  render() {
    return <Input onChangeText={this.onChangeTextDelayed} />
  }
}

类MyComponent扩展了React.Component{ 构造函数（）{ this.onChangeTextDelayed=u.debounce（this.onChangeText，2000）； } onChangeText（文本）{ 控制台日志（“去抖动”）； } render（）{ 返回 } } 2019：使用“useCallback”反应挂钩 在尝试了许多不同的方法之后，我发现使用“useCallback”是解决多个调用问题最简单、最有效的方法

根据“useCallback返回回调的一个记忆版本，该版本仅在其中一个依赖项发生更改时才会更改。”

将空数组作为依赖项传递可以确保回调只调用一次。下面是一个简单的实现

import React, { useCallback } from "react";
import { debounce } from "lodash";

const handler = useCallback(debounce(someFunction, 2000), []);

const onChange = (event) => {
    // perform any event related action here

    handler();
 };

希望这有帮助

2021年更新 正如其他答案所述，必须创建一次去Bounce函数引用，并通过调用相同的引用来取消相关函数（即，在我的示例中，

changeTextDebounced

）。乔治·博鲁诺夫（George Borunov）的答案稍加修改就可以了

class SomeClassComponent extends React.Component {
  componentDidMount = () => {
    this.changeTextDebouncer = _.debounce(this.changeTextDebounced, 500);
  }

  changeTextDebounced = (text) => {
    console.log("debounced");
  }

  render = () => {
    return <Input onChangeText={this.changeTextDebouncer} />;
  }
}

class SomeClassComponent扩展了React.Component{
componentDidMount=（）=>{
this.changeTextDebouncer=u.debounced（this.changeTextDebounced，500）；
}
changeTextDebounced=（文本）=>{
控制台日志（“取消公告”）；
}
渲染=（）=>{
返回；
}
}

onChangeText

每次更改输入时都会被调用，键入foo将使debounce函数调用3次，因此行为是正确的。@jmac我很确定错误总是在我身上。debounce创建一个新函数，该函数应作为回调直接传递，但您已经将其包装在额外的函数中，并在每次发生更改时手动创建并调用一个新的取消公告函数实例。您应该消除这个额外的包装器：

onChangeText={{uu.debounce（（text）=>console.log（'debouning'，text），2000）}

。不要担心参数，它会将它们传递给您的处理程序。如果您有任何理由立即调用取消公告函数（例如，当onBlur事件发生时），这非常适合。只需调用

this.onChangeTextDelayed.flush（）

，就会立即跳过最后一个超时。小于100ms的debounce会使我的应用程序崩溃。还有其他人有这个问题吗？