承诺解决后承诺中的超时循环永远不会执行？

Question

我遇到了一个问题,即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.

我在这里错过了什么？我相信事件循环不应该被阻止,因为我在async函数上调用await来检查是否已经调用了回调.我假设它与timeoutLoopCallback被解决的承诺绑定有关,但我不是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

处理承诺结算的工作进入ECMAScript标准中描述的"Promise Job Queue"(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值,而不处理其间的任何计时器回调.

这设置了一个异步无限循环(祝贺BTW,我之前没见过!),在这些条件下,我不希望定时器回调执行并再次调用timeoutLoopCallback.

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

  foo.stop()

从不执行.

请注意,此处观察到的阻塞效果是"Promise作业队列"的HTML实现的结果 - ECMAScript commit选择不指定实际JavaScript系统的implimentation和优先级详细信息.所以责怪HTML标准,而不是ECMAScript:D

另外请注意:更换await calledBackCalled用await hasCallbackCalled()不会解决这个问题-不同的承诺的工作将会产生,但运营商的await仍将返回false.

(更新)既然你问,实际的步骤

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

是:

1. 评估 hasCallbackCalled()
2. 'hasCallbackCalled`是一个异步函数,它返回一个使用函数体返回值实现的promise.
3. 函数体是同步代码,通过同步返回callbackCalled(即false)的值来实现第一次调用时返回的promise.
4. 到目前为止,异步函数返回的promise已与值同步实现false.
5. await现在通过调用.then在步骤4中获得的promise来添加处理程序,以便await知道已结算的值和状态(在这种情况下为"已完成").
6. 但是,调用then已实现的承诺会同步插入一个作业,将已完成的值调用已完成的处理程序调用到MTQ中
7. MTQ现在有一个工作来调用这个特定的代码await;
8. await 返回事件循环管理器.
9. MTQ作业现在执行步骤5中添加的then处理程序,
10. then处理程序恢复await操作员处理,将值返回false给用户脚本.
11. while循环测试从步骤1继续执行.