Debounce 在执行时得到错误的参数值

Question

主要问题是如何使用实际变量值而不是 500 毫秒前的实际值来执行 debounce 函数？

在执行时，debounce 函数似乎由于闭包而具有过时的参数值。

在我的代码中，我试图仅在用户将鼠标从下拉菜单中离开至少 1 秒时才隐藏下拉菜单。因此，如果用户从下拉菜单中离开鼠标然后立即返回鼠标 - 下拉菜单仍然可见。

但是 debounceHide 函数永远不会将活动下拉菜单设置为 null 因为它使用 stillHoverOnDropdown 值实际 1000 毫秒前（所以它的值为 true）

我将代码放在下面，但请注意，这只是为了更好地理解。我在实际项目中的代码要大得多，并且有很多带有下拉菜单的链接。

您还会看到onHoverStart 和onHoverEnd - 等于onMouseEnter 和onMouseLeave。 示例：

function debounce(fn, ms, ...args) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, ms);
  };
}


const Navbar = () => {
  const [activeDropdown, setActiveDropdown] = useState(null);
  const [stillHoverOnDropdown, setStillHoverOnDropdown] = useState(false);

  const debounceHide = debounce(
    () => {
      if (!stillOnDropdown) {
        setActiveDropdown(null);
      }
    },
    1000
  );

  const handleHoverStart = () => {
    setStillOnDropdown(true)
  }

  const handleHoverEnd = () => {
    setStillOnDropdown(false)
    debounceHide();
  }

  return (
    <>
       <motion.a onHoverStart={() => handleDropdownHover(el.id)}>Link</motion.a>
       <motion.div onHoverStart={handleHoverStart} onHoverEnd={handleHoverEnd}>Dropdown Content</motion.div>
    </>
  )
}

Answer 1

我找到了我的问题的答案。当setTimeout 被调度时，它使用的是stillOnDropdown 在调度时的值。

useRef 可以解决这个问题。

// Use a ref to access the current count value in
// an async callback.
const countRef = useRef(count);
countRef.current = count;

const getCountTimeout = () => {
  setTimeout(() => {
    setTimeoutCount(countRef.current);
  }, 2000);
};

https://github.com/facebook/react/issues/14010