javascript - promise 中的超时循环在 promise 解决后永远不会执行？

Question

我遇到了一个问题，即从已解决的 promise 发送到 setTimeout 的回调永远不会执行。

假设我有以下内容:

class Foo {
  constructor(foo) {
    this.foo = foo;
  }

  async execUntilStop(callback) {
    const timeoutLoopCallback = () => {
      if (this.stopExec) return;
      callback({ data: 'data' });
      setTimeout(timeoutLoopCallback, 10);
    };
    setTimeout(timeoutLoopCallback, 10);

    return { data: 'data'};
  }

  stop() {
    this.stopExec = true;
  }
}

const myFunc = async function () {
  let callbackCalled = false;
  const callback = () => callbackCalled = true;
  foo = new Foo('foo');
  foo.execUntilStop(callback);
  const hasCallbackCalled = async () => callbackCalled;

  while(!(await hasCallbackCalled())) null;
  foo.stop();
  return 'success!';
};

myFunc().then((result) => console.log(result))

myFunc() 永远不会解析，因为它一直在等待 callbackCalled 为 true。

我在这里错过了什么？我相信事件循环不应该被阻止，因为我在异步函数上调用 await 来检查回调是否被调用。我假设它与 timeoutLoopCallback 绑定(bind)到已解决的 promise 有关，但我不是 JavaScript 专家，可以使用一些反馈。

注意:这看起来有点奇怪，但本质上这是我正在尝试为其编写测试用例的类的派生类，它将不断执行回调直到停止。

---

已解决

利用我从@traktor53 的回答中学到的知识，我编写了一个方便的花花公子 wait 函数:

// resolves when callback returns true
const wait = callback => new Promise((resolve, reject) => {
  const end = () => {
    try {
      if (callback()) {
        resolve(true);
      } else {
        setTimeout(end, 0);
      }
    } catch(error) {
      reject(error);
    }
  };
  setTimeout(end, 0);
});


class Foo {
  constructor(foo) {
    this.foo = foo;
  }

  async execUntilStop(callback) {
    const timeoutLoopCallback = () => {
      if (this.stopExec) return;
      callback({ data: 'data' });
      setTimeout(timeoutLoopCallback, 10);
    };
    setTimeout(timeoutLoopCallback, 10);

    return { data: 'data'};
  }

  stop() {
    this.stopExec = true;
  }
}

const myFunc = async function (num) {
  let callbackCalled = false;
  const callback = () => callbackCalled = true;
  foo = new Foo('foo');
  foo.execUntilStop(callback);

  const hasCallbackCalled = () => callbackCalled;
  await wait(hasCallbackCalled);
  foo.stop();
  return 'success!';
};

myFunc().then((result) => console.log(result)); // => success!

Answer 1

处理 promise 结算的作业进入 ECMAScript 标准中描述的“Promise 作业队列”(PJQ)。这种命名法在 HTML 文档中不常使用。

浏览器(和至少一个脚本引擎)将 PJQ 的作业放入通常称为“微任务队列”(MTQ) 的任务中。事件循环任务管理器在从事件循环的脚本调出返回时检查 MTQ，看它是否有任何作业，如果有，将弹出并执行队列中最旧的作业。原帖中的那一行

 while(!(await callbackCalled)) null;

(在第一次调用中相当于

while( !( await Promise.resolve( false));  // callbackCalled is false

)

将一个作业用于获取 Promise.resolve 返回的 promise 的结算值，并将其放入 MTQ 中，并通过让 await 运算符返回已完成的值继续执行，该值是 false.

因为浏览器处理 MTQ 的优先级高于定时器到期生成的任务，所以在 await 操作之后继续执行并立即执行循环的另一次迭代并将另一个作业放入 MTQ 以等待false 值，中间不处理任何计时器回调。

这设置了一个异步无限循环(顺便说一句，祝贺你，我以前从未见过!)，在这种情况下，我不希望定时器回调执行并调用 timeoutLoopCallback 一秒钟时间。

无限循环也阻止继续到下一行:

  foo.stop()

从不执行。

请注意，此处观察到的阻塞效应是“Promise Job Queue”的 HTML 实现的结果 - ECMAScript promise 选择不指定实际 JavaScript 系统的实现和优先级细节。所以归咎于 HTML 标准，而不是 ECMAScript :D

另请注意:将 await calledBackCalled 替换为 await hasCallbackCalled() 不会解决问题 - 将生成不同的 promise 作业，但 await 运算符仍会返回 假。

---

(更新)既然你问了，

的实际步骤

 while(!(await hasCallbackCalled())) null;

是:

1. 评估hasCallbackCalled()
2. 'hasCallbackCalled` 是一个异步函数，返回一个由函数主体的返回值实现的 promise 。
3. 函数体是同步代码，通过同步返回callbackCalled的值(false)来完成第一次调用时返回的promise
4. 到目前为止，异步函数返回的 promise 已同步实现，值为 false。
5. await 现在通过调用 .then 在步骤 4 中获得的 promise 上添加处理程序，让 await 知道已结算的值和状态(在本例中为“已完成”)。
6. 但是在已完成的 promise 上调用 then 同步 会插入一个作业，以将已完成的处理程序与已完成的值一起调用到 MTQ 中
7. MTQ 现在有一个工作来为这个特定的 await 调用代码；
8. await 返回到事件循环管理器。
9. MTQ 作业现在执行在步骤 5 中添加的 then 处理程序，
10. then 处理程序恢复 await 运算符处理，将值 false 返回给用户脚本。
11. while 循环测试从步骤 1 继续执行。