Question

我在弄清楚FP如何处理鼠标事件等方面遇到一些麻烦。这是有关如何使用mousemove事件的示例。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    let mouseObject = {};
    const mouseFn = () => mouseObject;
    const onMove = ev => {
      mouseObject = {x:ev.x, y:ev.y}
    };
    document.addEventListener('mousemove',onMove);
    const loop = (fn) => {
      console.log(fn());
      requestAnimationFrame(() => loop(fn));
    }
    loop(mouseFn);
  </script>
</head>
<body>
</body>
</html>

您可以在代码上看到，我先添加一个侦听器，然后使用requestAnimationFrame创建一个循环。

我对代码不满意的是，在“ onMove”函数上，我直接修改mouseObject，在“ mouseFn”上，我返回mouseObject，它没有作为参数传递给函数。 / p>

但是我看不出有更好的方法来做到这一点以及在循环内更新mouseObject

如何通过功能性方法处理鼠标事件中的杂质

0 个答案: