Promise 內的 requestAnimationFrame

Question

有人可以解釋一下這個 function 的作用嗎？ 我了解requestAnimationFrame在繪制和渲染幀之前是如何執行的，但我不確定將它放入 promise 有什么用處。

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

Answer 1

Promise構造函數接受所謂的executor器 function 作為它的第一個參數，可用於控制 promise 執行流程。 這個 function 有兩個 arguments： resolve和reject - 您調用這些函數來解決或拒絕 promise。

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

當您使用new Promise(executor)創建新的 promise 時，該executor程序 function 會在內部自動調用。

接下來， requestAnimationFrame需要一個回調，只要瀏覽器准備好執行您的幀代碼，就會觸發該回調。

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

如果您嘗試在executor(resolve, reject)簽名之上施加requestAnimationFrame(frameCallback)簽名，那么

• requestAnimationFrame是executor function
• frameCallback是resolve function

總而言之，使用new Promise(requestAnimationFrame)

1. Promise 構造函數在內部調用執行器（在本例中為requestAnimationFrame ）。 當requestAnimationFrame被調用時，瀏覽器在內部將其調度為對 animation 的請求。
2. 當瀏覽器准備好為請求的幀設置動畫時，它會調用提供給requestAnimationFrame的回調。 在我們的例子中， resolve用作回調。 此外， resolve將使用requestAnimationFrame的時間戳傳遞，即 promise 將使用時間戳值解析。

我想這段代碼可以用來 Promise-ify requestAnimationFrame ，構造的 promise 將在requestAnimationFrame回調被調用時被解析。

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

Answer 2

...或者簡單地說：

await new Promise(requestAnimationFrame);
// <-- body of the former frameCallback function