在Promise内使用requestAnimationFrame

Question

有人可以解释一下这个函数的作用吗？我知道requestAnimationFrame在一帧中的绘画和渲染之前执行，但我不太确定把它放在一个 promise 中的实用性。

function nextFrame() {
  return new Promise(requestAnimationFrame)
}

- Adam

---

被接受的答案提供了很好的机制解释。我认为一个很大的动力是你可以在async函数内部编写await nextFrame();，例如在每个动画步骤中应该运行一次的循环的顶部。 - Matthias Fripp

Answer 1

Promise 构造器接受一个被称为 executor 函数的参数作为其第一个参数，它可以用来控制 Promise 的执行流程。这个函数有两个参数：resolve 和 reject - 这是你调用以解决或拒绝 Promise 的函数。

const promise = new Promise(function executor(resolve, reject) {
   resolve();
   // reject();
});

创建一个新的 Promise 时，executor 函数会自动内部调用。

而 requestAnimationFrame 需要一个回调函数，该函数将在浏览器准备执行帧代码时触发。

requestAnimationFrame(function frameCallback(timestamp) {
    // ...frame code
});

如果你试图在executor(resolve, reject)签名之上强制使用requestAnimationFrame(frameCallback)签名，则：

• requestAnimationFrame是executor函数
• frameCallback是resolve函数

将它们结合起来，使用new Promise(requestAnimationFrame)：

1. Promise构造函数内部调用执行器（在这种情况下为requestAnimationFrame）。当调用requestAnimationFrame时， 浏览器会在内部将其安排为请求动画帧。
2. 当浏览器准备好动画所请求的帧时，它会调用提供给requestAnimationFrame的回调函数。在我们的例子中，resolve作为一个回调函数。此外，resolve将被传递requestAnimationFrame的时间戳，即承诺将解决为时间戳值。

我想这段代码可以用于将requestAnimationFrame转换为Promise，构建的Promise将在调用requestAnimationFrame回调时立即解析。

const promise = new Promise(requestAnimationFrame);
promise.then(function frameCallback(timestamp) => {
  // ... frame code
});

- Michael Radionov