javascript - 承诺和 MatchMedia 订单

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

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