在 React 应用程序的 onChange 中使用 setTimeout

Question

我试图为通过更改输入值触发的操作添加延迟。我需要在用户将最后一个字符写入输入后 2 秒后触发此操作。

首先，我试着写这样的东西：

onChange={(e) => {
   const timeoutFn = setTimeout(() => {
     // This func triggers rerender of the component
     onInputChange(e.target.value);
   }, 2000);
   return () => clearTimeout(timeoutFn);
}}

这种方法行不通，所以我改用了

useEffect

，效果很好。但是，现在我对

setTimout

在

onChange

的处理程序中的奇怪行为很感兴趣。

当我在

setTimeout

内使用

onChange

时，

onInputChange

在用户开始打字后2秒后仅触发一次。同时，

e.target.value

包含用户最后输入的值。

为什么它会那样工作而不是像

setTimout

在

useEffect

中工作？