Promise resolve() 被调用，但直到它被调用的循环终止才解决

Question

我正在基于游戏循环在 nodejs 中编写应用程序。循环的每次迭代，它都会触发一个事件发射器，并像这样调用一个更新方法：

  updateLoop() {
    while (!this.windowShouldClose()) {
      this.onUpdate.emit();
      this.update();
    }
  }

似乎事件发射器可以帮助在游戏对象上编写异步函数，这些函数在不同操作之间等待帧，就像协程一样。我写了一个实用函数，它可以回调，或者在事件发射器的下一次发射时解决一个承诺：

nextFrame() {
  return new Promise((resolve) => {
    this.onUpdate.once(resolve); // event emitter will resolve promise on next emit()
  })
}

nextFrameCallback(callback) {
  this.onUpdate.once(callback);
}

// example use
async doThingsAsync() {
  // do something
  await this.nextFrame();
  // do something else on the next frame / loop iteration
}

虽然基于回调的函数按预期工作，但 nextFrame() 的承诺版本并没有在我预期的时间解决承诺。在我的示例中，await nextFrame() 仅在 updateLoop() 的外循环退出后才解析。我在 promise 上附加了一个 console.log 以了解更多信息，并发现控制台日志和 resolve() 确实在循环中被调用，但等待它仍然会等待循环完全终止。

nextFrameDebug() {
  return new Promise((resolve) => {
    this.onUpdate.once(() => {
      console.log('debug nextFrame'); // this prints during the expected loop iteration
      resolve(); // this does not actually resolve until updateLoop() terminates
    })
  })
}

这是一个演示上述功能的 JSFiddle：https://jsfiddle.net/8L4wub29/5/ 似乎我接近一个功能性解决方案，但我对承诺或异步函数有一些误解。这是否与从循环中调用异步函数有关？我如何编写 nextFrame() 以便承诺在循环的下一次迭代时解决，而不是在循环退出后解决？我意识到对于游戏中的大多数功能，毫秒超时更有用，但在某些情况下，例如等待物理更新，游戏可能只想等待一帧作为实用函数。基于回调的版本运行良好，但如果需要多次使用则需要嵌套，看起来不像使用await那么干净

Answer 1

Promises 保证它们的.then 回调将总是被异步调用。这意味着如果你有一些随机的承诺，并且你做这样的事情：

somePromise.then(() => {
  console.log('inside');
});
console.log('outside');

即使promise 恰好已经处于已解决状态，您也会始终看到“outside”后跟“inside”。 Promise 是这样设计的，因此您可以确定执行顺序，因此不必修复涉及两个顺序的痛苦错误。当您使用 await 而不是显式的 .then 时也是如此：await 之后的代码必须等到 promise 解决，并且调用堆栈返回到系统代码。

因此，当您从回调切换到 Promise 时，您从可以在循环中间同步调用回调的代码转到必须等待执行返回的代码。只有一次updateLoop 返回或产生，promise 之后的代码才能运行。由于该循环在结束之前永远不会返回或产生，因此所有承诺都会延迟到循环之后。

如果您需要 updateLoop 同步运行，那么您不能为此使用 Promise。如果相反 updateLoop 应该是异步的（也许在运行下一步之前设置超时），那么可以使用 Promise，但我需要更多关于你试图做什么的细节来举个例子。

Answer 2

回答我自己的问题，因为我找到了提供预期功能的东西。我只是将示例中的 updateLoop() 调用更新为此。

  async updateLoop() {
    while (!this.windowShouldClose()) {
      await null;
      this.onUpdate.emit();
      this.update();
    }
  }

是否有人能够更清楚地评论为什么现在会产生预期的效果？除非我添加 await 语句，否则将函数更改为 async 不会影响 promise 解决的点。我的假设包括等待语句释放事件循环，最终允许承诺解决。 如果您使用此函数编辑上述 JSfiddle，则控制台中打印的数字将与打印语句“预期”的内容不一致 - 这仅与计数器增加有关。执行顺序似乎是正确的。