在 React 中再次调用函数时，Lodash _.debounce 不会取消现有计时器答案

【问题标题】：Lodash _.debounce is not canceling existing timer when function is called again in React在 React 中再次调用函数时，Lodash _.debounce 不会取消现有计时器
【发布时间】：2020-05-20 17:38:44
【问题描述】：

我正在尝试为我的 React 组件中的表单消除 onChange 事件。我计划将 debounceStateUpdate 移动到静态 utils 函数中以通用化去抖动时间，这就是为什么存在额外层而不是直接使用 _.debounce 的原因。

const ProfileGeneralEditContent = props => {
    const debounceStateUpdate = updateFunction => {
        return _.debounce(params => updateFunction(params), 700);
    };

    const FormsyFieldUpdated = debounceStateUpdate((config) => {
        console.log("update some things here");
    });

    return (
        <Formsy
            onChange={(config) => {
                FormsyFieldUpdated.cancel();
                FormsyFieldUpdated(config);
            }}
            onInvalid={() => setValid(false)}
            onValid={() => setValid(true)}
        >
            <div className={'flex justify-start items-start'}>
            .
            .
            . (more jsx)

我认为当onChange 事件触发时，cancel() 调用将取消所有正在运行的现有去抖动定时器并启动一个新定时器。

我的目标是在每次按键时从更新状态中消除输入的抖动，这样状态只会在 700 毫秒无更新后更新。但是目前，这段代码只是将每次按键的状态更新延迟了 700 毫秒，并且每次按键的状态更新仍在进行中。

如何使用_.debounce 保持一个运行的去抖动计时器来延迟我的状态更新，而不是为每个按下的键同时运行 10 个计时器？

【问题讨论】：

标签： javascript reactjs react-redux lodash

【解决方案1】：

我想通了。我需要将我的去抖函数定义包装在useCallback() 中，因为组件的重新渲染会在每次按键时重新定义去抖函数，因此它不会知道其先前迭代的运行函数。

const ProfileGeneralEditContent = props => {
    const debounceStateUpdate = updateFunction => {
        return _.debounce(params => updateFunction(params), 700);
    };

    const FormsyFieldUpdated = useCallback(debounceStateUpdate((config) => {
        console.log("update some things here");
    }), []);

    return (
        <Formsy
            onChange={(config) => FormsyFieldUpdated(config)}
            onInvalid={() => setValid(false)}
            onValid={() => setValid(true)}
        >
            <div className={'flex justify-start items-start'}>
            .
            .
            . (more jsx)

【讨论】：