[javascript] 브라우저가 기본 약속을 지원하지 않는 경우 마이크로 태스킹을 대기하는 방법은 무엇입니까?

즉각적인 콜백 타이밍에 의존하지 않는 코드를 작성하는 것이 좋습니다 (마이크로 태스크와 매크로 태스크와 같은).

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해결 된 약속에 대한 동작 은 기본 setTimeout콜백 동작과 근본적으로 다릅니다 . 약속 .then이 먼저 setTimeout대기 하더라도 약속 이 먼저 실행됩니다 . 그러나 최신 브라우저 만 약속을 지원합니다. 존재하지 않는 경우 마이크로 태스크 의 특수 기능을 어떻게 제대로 채울 수 Promise있습니까?

.then를 사용하여의 마이크로 태스크 를 모방하려고 setTimeout하면 마이크로 태스크가 아닌 매크로 태스크를 큐에 넣게되므로 .then매크로 태스크가 이미 대기중인 경우 잘못 채워진 것이 적시에 실행되지 않습니다.

를 사용하는 솔루션이 MutationObserver있지만 추악한 것처럼 보이며 목적이 아닙니다 MutationObserver. 또한 MutationObserverIE10 및 이전 버전에서는 지원되지 않습니다. 약속을 기본적으로 지원하지 않는 환경에서 마이크로 태스크를 대기시키려는 경우 더 나은 대안이 있습니까?

( 실제로 IE10을 지원하려고 하지는 않습니다. 이것은 약속없이 마이크로 태스킹을 대기하는 방법에 대한 이론적 인 연습 일뿐입니다)

답변

var setImmediate = (function() {
  var queue = [];

  function on_message(e) {
    if(e.data === "setImmediateMsg") queue.pop()()
  }

  if(window.addEventListener) { // IE9+
    window.addEventListener('message', on_message)
  } else { // IE8
    window.attachEvent('onmessage', on_message)
  }

  return function(fn) {
    queue.unshift(fn)
    window.postMessage("setImmediateMsg", "*")
  }
}())

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

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');