javascript - 如果浏览器不支持 native Promises，如何将微任务排队？

Question

最好编写不依赖于即时回调时间的代码(如微任务与宏任务)，但我们暂时先把它放在一边。
setTimeout排队一个宏任务，它至少会等待启动，直到所有微任务(以及它们产生的微任务)完成。这是一个例子:

console.log('Macrotask queued');
setTimeout(function() {
  console.log('Macrotask running');
});
Promise.resolve()
  .then(function() {
    console.log('Microtask running');
  });
console.log('Microtask queued');
console.log('Last line of script');

.then 的行为已解决的 Promise 与立即 setTimeout 的行为根本不同回调 - Promise .then将首先运行，即使 setTimeout首先排队。但只有现代浏览器支持 Promises。如果 Promise，如何正确填充微任务的特殊功能？不存在？

如果你试图模仿 .then的微任务，使用 setTimeout ，你将排队一个宏任务，而不是一个微任务，所以填充严重的 .then如果宏任务已经排队，则不会在正确的时间运行。

有一个使用 MutationObserver 的解决方案, 但它看起来很丑，而且不是 MutationObserver是为了。另外， MutationObserver IE10 及更早版本不支持。如果一个人想在一个本身不支持 Promises 的环境中排队一个微任务，有没有更好的选择？

(我实际上并没有尝试支持 IE10 - 这只是关于如何在没有 Promise 的情况下对微任务进行排队的理论练习)

Answer 1

我看到了mutationObserver回调使用微任务，幸运的是，IE11 支持它，所以我想通过保存回调在 IE11 中对微任务进行排队，然后通过更改元素立即触发观察者:

var weirdQueueMicrotask = (function() {
  var elementThatChanges = document.createElement('div');
  var callback;
  var bool = false;
  new MutationObserver(function() {
    callback();
  }).observe(elementThatChanges, { childList: true });
  return function(callbackParam) {
    callback = callbackParam;
    elementThatChanges.textContent = bool = !bool;
  };
})();

setTimeout(function() {
  console.log('Macrotask running');
});
console.log('Macrotask queued');
weirdQueueMicrotask(function() {
  console.log('Microtask running');
});
console.log('Microtask queued');
console.log('Last line of script');

您可以打开 IE11 并查看上面的工作，但代码看起来很奇怪。