reactjs - useEffect 中的 debounce 问题

Question

我有一个带有用户名输入的表单，我正在尝试验证用户名是否在去抖动功能中使用。我遇到的问题是，当我输入“user”时，我的去抖动似乎不起作用，我的控制台看起来像

u
us
use
user

这是我的去抖功能

export function debounce(func, wait, immediate) {
    var timeout;

    return () => {
        var context = this, args = arguments;

        var later = () => {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
};

这是我在 React 组件中调用它的方式

import React, { useEffect } from 'react' 

// verify username
useEffect(() => {
    if(state.username !== "") {
        verify();
    }
}, [state.username])

const verify = debounce(() => {
    console.log(state.username)
}, 1000);

去抖功能似乎是正确的？我在 react 中调用它的方式有问题吗？

Answer 1

每次你的组件重新渲染时，一个 新品 去抖动 verify函数被创建，这意味着里面useEffect您实际上是在调用不同的函数，这违背了去抖动的目的。
就像你在做这样的事情:

const debounced1 = debounce(() => { console.log(state.username) }, 1000);
debounced1();

const debounced2 = debounce(() => { console.log(state.username) }, 1000);
debounced2();

const debounced3 = debounce(() => { console.log(state.username) }, 1000);
debounced3();

与您真正想要的相反:

const debounced = debounce(() => { console.log(state.username) }, 1000);
debounced();
debounced();
debounced();

解决此问题的一种方法是使用 useCallback这将始终返回相同的回调(当您将空数组作为第二个参数传递时)，此外，我将传递 username到这个函数而不是访问里面的状态(否则你将访问一个陈旧的状态):

import { useCallback } from "react";
const App => () {
  const [username, setUsername] = useState("");

  useEffect(() => {
    if (username !== "") {
      verify(username);
    }
  }, [username]);

  const verify = useCallback(
    debounce(name => {
      console.log(name);
    }, 200),
    []
  );

  return <input onChange={e => setUsername(e.target.value)} />;
}

您还需要稍微更新您的 debounce 函数，因为它没有正确地将参数传递给 debounced 函数。

function debounce(func, wait, immediate) {
  var timeout;

  return (...args) => { <--- needs to use this `args` instead of the ones belonging to the enclosing scope
    var context = this;
...

demo