反应秒表的长按事件

Question

我一直在努力解决这个问题。 在这里创建这篇文章之前，我已经在整个社区中进行了搜索，我已经看到了很多 React 中长按事件的解决方案，但每个人都只解决了单击按钮事件。

我正在为 Rubik's 自己制作秒表。 我需要做的是以下步骤：

1. 用户必须按住空格键两秒钟才能“准备就绪”；
2. 一旦用户“准备好”，在他松开空格键的那一刻，秒表就开始了；
3. 一旦他完成了魔方，他再次按下空格键以停止秒表。

PS-1：如果秒表没有运行并且用户只是按下空格键（不按住它），什么都不会发生！ 只有当用户按住空格键至少两秒钟然后松开它时，秒表才会启动。

现在，我的问题是我应该查看的所有事件（开始和停止）都在 JavaScript 中的“keydown”和“keyup”侦听器下。 我已经尝试了很多不同的解决方案来管理 JS 中的超时本机 function，但正如我所说，如果秒表停止并且用户只是按下空格键，我不应该做任何事情。

我尝试使用 useState 和 useRef 挂钩来控制超时并检查空格键是刚刚按下还是长按。 再说一次，一旦这两个事件在“keydown”侦听器下，我的问题就是不知道如何管理它。

我希望你们能帮助我，这将意味着很多！

先感谢您。

PS-2：我正在使用 TypeScript！

Answer 1

如果您只想在释放空格键时触发事件，为什么不使用时间戳作为参考？ 类似于以下内容：

const [timestamp, setTimestamp] = useState(0);

const spacebarPress = (e) => {
  if (e.keyCode !== 32) return; // exit if the key is not spacebar
  setTimestamp(Date.now());
}

const spacebarRelease = (e) => {
  if (e.keyCode !== 32) {
    return; // exit if the key is not spacebar
  }
  const pressed = timestamp, released = Date.now();
  setTimestamp(0); // no longer needed, reset for next press
  if (released - pressed < 2000)
    return; // less than 2 seconds have passed since pressing
  // ... your logic here, spacebar was pressed for two seconds.
}

我通常倾向于尽可能避免 setTimeout，IMO 它不是很可靠并且调试起来很痛苦。

Answer 2

我正在尝试使用以下代码解决此问题：

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

    return () => {
      removeEventListener("keydown", handleKeyDown);
      removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key !== " ") {
      return;
    }

    timeRef.current = Date.now();
    setTimestamp(Date.now());
  };

  const handleKeyUp = (e: KeyboardEvent) => {
    if (e.key !== " ") {
      return;
    }

    const pressed = timestamp;
    const released = Date.now();

    if (released - pressed < 2000) {
      return;
    }
  };

出于某种原因，时间戳 state 始终为 0（默认状态）。 我试过改用 useRef ，但也没有用。