Question

我的代码如此宁静：

const mql = window.matchMedia('(min-width: 400px)');
mql.addListener(e => {
     if (e.matches)
          console.log('Match!');
});

Promise.resolve('Resolved').then(console.log);

当我在Chrome上执行它时，输出为“已解决”，并在“匹配”之后。但是在Firefox上则相反。

我不明白为什么会有所不同？可以强制执行命令吗？

Answer 1

根据事件循环规范，微任务在任何渲染回调之前执行。不幸的是，没有一个浏览器遵守规范。 Chrome远远不是最接近的，这就是为什么首先执行Promise作为微任务的原因。 Firefox不符合规格。

您可以查看此链接，以获取有关事件循环https://github.com/atotic/event-loop的更多信息和差异

根据经验，除非您对相同类型的事件进行回调，否则不要依赖执行顺序。

承诺和MatchMedia订单

1 个答案: