Lodash debounce 触发每次更改答案

【问题标题】：Lodash debounce firing every changeLodash debounce 触发每次更改
【发布时间】：2020-06-16 10:06:35
【问题描述】：

我正在尝试从 React 中的输入更改中消除发送 Redux Action 的抖动。

const debouncedSubmit = debounce(() => dispatch(new TaskAnswerSubmit({index: props.index, text: answer})), 1000)

function onChange(e){
    setAnswer(e.target.value)
    debouncedSubmit()
}

这会延迟发送动作，但仍会为每次按键发送一个动作。我想在输入完成后等待一秒钟，然后再发送一次操作。

我在这里做错了什么？

【问题讨论】：

标签： javascript reactjs redux react-redux lodash

【解决方案1】：

我相信这里发生的事情是每次按键都会导致重新渲染，并且在每次渲染期间它都会创建一个新的debouncedSubmit 函数，并且每个都在触发。尝试使用 React 的 useCallback 方法来记忆函数，这样它就不会在重新渲染时重新创建：

const debouncedSubmit = useCallback(debounce(() => dispatch(new TaskAnswerSubmit({index: props.index, text: answer})), 1000), []);

【讨论】：

【解决方案2】：

我认为你需要节流。

这是之前提出的关于油门和去抖动Difference Between throttling and debouncing a function之间区别的问题的答案：

限制会延迟执行功能。它将减少多次触发的事件的通知。

去抖动会将对函数的一系列连续调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。

【讨论】：