javascript – 承诺中的超时循环永远不会在承诺解决后执行?

我遇到了一个问题,即从已解析的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为真.

我在这里错过了什么?我相信事件循环不应该被阻止,因为我在async函数上调用await来检查是否已经调用了回调.我假设它与timeoutLoopCallback绑定到已解析的promise有关,但我不是javascript专家,可以使用一些反馈.

注意:这看起来有点奇怪,但实际上这是我试图编写测试用例的类的衍生物,它将持续执行回调直到停止.

解决了

使用我从@ traktor53回答中学到的东西,我写了一个方便的花花公子等待函数:

// 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!
最佳答案
处理承诺结算的工作进入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运算符返回已满足的值继续执行,这是错误的.

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

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

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

  foo.stop()

从不执行.

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

另请注意:使用await hasCallbackCalled()替换await calledBackCalled将无法解决问题 – 将生成不同的promise作业,但await运算符仍将返回false.

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

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

是:

>评估hasCallbackCalled()
>’hasCallbackCalled`是一个异步函数,它返回一个使用函数体返回值实现的promise.
>函数体是同步代码,通过同步返回callbackCalled的值来实现第一次调用时返回的promise(这是false)
>到目前为止,异步函数返回的保证已同步满足值false.
> await现在通过调用.then在步骤4中获得的承诺来添加处理程序,以等待知道已结算的值和状态(在这种情况下为“已履行”).
>但是,然后调用已实现的承诺会同步插入一个作业,将具有已实现值的已完成处理程序调用到MTQ中
> MTQ现在有一个工作来调用此特定的代码等待;
> await返回事件循环管理器.
> MTQ作业现在执行步骤5中添加的then处理程序,
> then处理程序恢复await运算符处理,将值false返回给用户脚本.
> while循环测试从步骤1继续执行.

转载注明原文:javascript – 承诺中的超时循环永远不会在承诺解决后执行? - 代码日志