在 PureScript 中带有时间戳的 requestAnimationFrame 循环

Question

我正在尝试使用 PureScript。 我在 JS 中经常做的事情如下：

let start;
function step(timestamp) {
  if (start === undefined)
    start = timestamp;

  const elapsed = timestamp - start;
    
  console.log(elapsed);

  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

我设法得到一个像这样的循环：

main :: Effect Unit
main = do
  w <- window
  step w

step :: Window -> Effect Unit
step w = do
  log "timestamp?!"
  requestAnimationFrame (step w) w $> unit

但是，我不知道step从这里到哪里，我什至不确定如何在 PureScript 中使用requestAnimationFrame的签名获取时间戳参数：
Effect Unit -> Window -> Effect RequestAnimationFrameId

Answer 1

由于某种原因，该库定义了没有参数的requestAnimationFrame ，所以那里没有运气（考虑向库提交拉取请求）。

如果我知道更多关于这样做的最终目的的细节，我可能会推荐一种更好的方法。 很有可能，在 PureScript 中，您根本不必使用requestAnimationFrame 。 例如，PureScript 有Aff ，它可能更适合。

但是在不知道具体细节的情况下，如果我必须尽可能地将该 JS 代码转换为 PureScript，我建议您为requestAnimationFrame定义自己的 FFI 绑定。

在您的外部模块中， MyModule.js ：

export function requestAnimationFrame(f) {
  window.requestAnimationFrame(ts => f(ts)())
}

在您的 PureScript 模块中， MyModule.purs ：

foreign import requestAnimationFrame :: (Int -> Effect Unit) -> Effect Unit

就是这样。 现在您可以调用您自己的requestAnimationFrame版本并将其传递给带有参数的 function：

step :: Window -> Int -> Effect Unit
step w ts = do
  log (show ts)
  requestAnimationFrame (step w)