如何通过异步回调实现requestAnimationFrame循环？

Question

我发现几个问题与我正在寻找的内容非常接近，但要么我理解不够，要么问题/答案并不完全适用于我正在寻找的内容：

• 如何将requestAnimationFrame与Promise一起使用
Promise 中的
• requestAnimationFrame

考虑一个非常简单的 requestAnimationFrame 循环示例：

const someList = [];

function main() {
    // Start the requestAnimationFrame loop
    requestAnimationFrame(update)
}

function update() {
    doSomething()

    // Loop by calling update again with requestAnimationFrame
    requestAnimationFrame(update);
}

function doSomething() {
    someList.push(Math.floor(Math.random() * 10));
}

main();

现在我们没有任何问题。我们启动循环，在循环内执行一些操作，再次调用 requestAnimationFrame，一切都很好。

现在考虑下一个例子。这里我们有一个名为

doSomethingAsynchronous

的异步函数，必须使用

await

来调用它。因此我们的

update

函数也需要是

async

。我的问题是，当传递给

requestAnimationFrame

的回调函数是异步时，我不明白如何使用

requestAnimationFrame

：

function main() {
    // Since update must now be async as well and called with await, what should this line look like?
    requestAnimationFrame(update)
}

function async update() {
    await doSomething()

    // Since update must now be async as well and called with await, what should this line look like?
    requestAnimationFrame(update);
}

function async doSomethingAsynchronous() {
    // Can't come up with an example, but this function should be called with await
}

main();

我觉得代码中的 requestAnimationFrame 行可能应该类似于以下之一：

await requestAnimationFrame(update)
await requestAnimationFrame(async () => { await update(); });
requestAnimationFrame(async () => { await update(); });

但我不太确定

requestAnimationFrame

是否可以或应该等待。如果我需要将

update

回调作为

async

函数提供，这也是我无法理解的。

Answer 1

只需将

requestionAnimationFrame

包裹成一个承诺：

let running = true;
async function update() {
  while(running){
    await new Promise(r => requestAnimationFrame(r));
    await doSomething();  
  }
}
let counter = 0;
function doSomething() {
    $div.textContent = counter++;
    return new Promise(r => setTimeout(r, 1000));
}

update()

<div id="$div"></div>
<button onclick="running=false">Stop</button>