0

下面的一段JS代码

<script>
    setTimeout(function(){
        console.log("1")
    });
    new Promise(function(resolve){
        console.log("2")
        resolve();
    }).then(function(){
        console.log("3")
    })
    console.log("4")
</script>

上面的的运行结果是
2
4
3
1
百思不得其解,为什么是2先出,setTimeout后面没有秒数不是应该直接执行吗?,而且3不是应该在2后面输出吗?为什么到4后面了?

寅春树 658
6月19日提问

查看全部 7 个回答

2

setTimeout是宏任务,promise是微任务,执行顺序是先同步,再微任务,再宏任务,new Promise是立即执行,所以是2431,建议你看一下宏任务和微任务的相关文章

推荐答案

0

已采纳

setTimeout 默认值是0,所以2先出
然后不管同步还是异步,在浏览器端,Promise会使用MutationObserver监听一个document.createTextNode(''),然后通过改变node.data的值来触发observer,执行callback,而在事件循环中,MutationObserver属于微任务,会比setTimeout 先运行

es6-promise asap.js

const BrowserMutationObserver = browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver;

function useMutationObserver() {
  let iterations = 0;
  const observer = new BrowserMutationObserver(flush);
  const node = document.createTextNode('');
  observer.observe(node, { characterData: true });

  return () => {
    node.data = (iterations = ++iterations % 2);
  };
}

if (isNode) {
  scheduleFlush = useNextTick();
} else if (BrowserMutationObserver) {
  scheduleFlush = useMutationObserver();
} else if (isWorker) {
  scheduleFlush = useMessageChannel();
} else if (browserWindow === undefined && typeof require === 'function') {
  scheduleFlush = attemptVertx();
} else {
  scheduleFlush = useSetTimeout();
}

推广链接