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。

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

注意：这看起来有点奇怪，但实际上这是I类的衍生物，我试图编写测试用例，然后才会继续执行回调直到停止。

解决

使用我从@ 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标准中描述的“承诺工作队列”（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以等待{{1 }}，，不处理之间的任何计时器回调。

这设置了一个异步无限循环（祝贺BTW，我之前没见过！），在这些情况下，我不希望定时器回调执行并再次调用false。 / p>

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

timeoutLoopCallback

永远不会执行。

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

另请注意：将foo.stop()替换为await calledBackCalled将无法解决问题 - 将生成不同的承诺作业，但await运算符仍将返回await hasCallbackCalled()。

<小时/> （更新）因为你问，

的实际步骤

false

是：

评估while(!(await hasCallbackCalled())) null;
'hasCallbackCalled`是一个异步函数，它返回一个使用函数体返回值实现的promise。
函数体是同步代码，并通过同步返回hasCallbackCalled()的值（callbackCalled）来实现第一次调用时返回的承诺
到目前为止，异步函数返回的保证已使用值false同步实现。
false现在通过调用步骤4中获得的承诺await来添加处理程序，让.then知道已结算的值和状态（在本例中为“已完成”）。
但是，对完成的承诺同步调用await 会插入一个作业，将已完成的值调用已完成的处理程序调用到MTQ中
MTQ现在有一个工作来调用此特定then的代码;
await返回事件循环管理器。
MTQ作业现在执行步骤5中添加的then处理程序
then处理程序恢复await运算符处理，将值await返回给用户脚本。
while循环测试从第1步继续执行。

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

1 个答案: