reactjs - 使用 react 钩子(Hook)当光标停止移动 3 秒时如何触发功能？

Question

我只是在探索钩子(Hook)，但我不知道在光标停止移动 3 秒后我必须使用什么逻辑才能触发函数

我的尝试

const handleMouseMove = () => {
        console.log('I don't know what to do ???')

    };
    useEffect(() => {
        window.addEventListener("mousemove", handleMouseMove);
        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
        };
    },[]);

Answer 1

let timer = null;

const handleMouseMove = () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    // do your things...
  }, 3000);
};

附加:

在您的 useEffect callback ，你应该清除这个timer避免超时回调。

useEffect(() => {
  window.addEventListener("mousemove", handleMouseMove);
  return () => {
    window.removeEventListener("mousemove", handleMouseMove);
    if (timer) clearTimeout(timer);
  };
},[]);