Promise 中的 requestAnimationFrame

Question

有人可以解释一下这个函数的作用吗？我了解 requestAnimationFrame 如何在帧内绘制和渲染之前执行，但我不太确定将其放入 promise 中有什么用。

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

Answer 1

Promise 构造函数接受一个所谓的 executor 函数作为它的第一个参数，它可以用来控制 promise 执行流程。此函数有两个参数：resolve 和 reject - 这些是您调用以解决或拒绝承诺的函数。

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

当您使用 new Promise(executor) 创建新承诺时，会在内部自动调用 executor 函数。

接下来，requestAnimationFrame 需要回调，只要浏览器准备好执行您的框架代码，就会触发回调。

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

如果您尝试在 executor(resolve, reject) 签名之上强加 requestAnimationFrame(frameCallback) 签名，那么

将它们放在一起，使用 new Promise(requestAnimationFrame)

Promise 构造函数在内部调用一个执行器（在本例中 requestAnimationFrame)。当调用 requestAnimationFrame 时，浏览器在内部将其安排为动画请求。
当浏览器准备好对请求的帧进行动画处理时，它会调用提供给 requestAnimationFrame 的回调。在我们的例子中 resolve 用作回调。此外 resolve 将与 requestAnimationFrame 的时间戳一起传递，即承诺将使用时间戳值解决。

我想这段代码可以用来 Promise-ify requestAnimationFrame，一旦 requestAnimationFrame 回调被调用，构造的 promise 就会被解决。

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

requestAnimationFrame inside a Promise