EventLoop、宏任务、微任务

106 阅读1分钟

这里推荐一篇关于事件轮询,消息队列,任务队列的文章:https://juejin.cn/post/6844903943093354503

1.关于宏任务和微任务:

这里面直接上图会比较好理解些:

然后来看下整个过程的动图:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    setTimeout(function () {
      console.log('1')
    });

    new Promise(function (resolve) {
      console.log('2');
      setTimeout(() => {
        console.log('5')
        resolve();
      })
    }).then(function () {
      console.log('3')
    });

    console.log('4');
 //输出 2 4 1 5 3 

  </script>
</body>

</html>