欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

宏任务与微任务和事件循环

程序员文章站 2022-06-25 11:21:51
首先//js引擎一直再等待传入的js代码来执行//而它执行的机制是eventloop事件循环//指的是//1.执行栈选择最先进入队列的宏任务（一般都是script）,把宏任务里的同步代码执行完//2.再把相应的微任务执行完//3.在浏览器的话,前面的同步代码和微任务要是有什么dom操作可能渲染下页面//4.开始下一轮tic,执行上个宏任务里的异步代码,其实就是相当于第二轮的宏任务了,然后又是一样的程序......

 

首先

  // js引擎一直再等待传入的js代码来执行

    // 而它执行的机制是event loop事件循环

 

    // 指的是

    // 1.执行栈选择最先进入队列的宏任务（一般都是script）,把宏任务里的同步代码执行完

    // 2.再把相应的微任务执行完

    // 3.在浏览器的话,前面的同步代码和微任务要是有什么dom操作可能渲染下页面

    // 4.其实此时是继续往下,看看同层还有没有同级的宏任务,也一并执行上面1 2 3步,等这一层结束,才又从这一层第一个宏任务开始往下循环 1 2 3步,每层都是如此,每次都是把一层的

    // 宏任务都这样执行完,一层层往下,而不是说一个宏任务递归执行完才开始去让第二个同级宏任务也同样递归执行,不是这样的

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // js引擎一直再等待传入的js代码来执行
    // 而它执行的机制是event loop事件循环

    // 指的是
    // 1.执行栈选择最先进入队列的宏任务（一般都是script）,把宏任务里的同步代码执行完
    // 2.再把相应的微任务执行完
    // 3.在浏览器的话,前面的同步代码和微任务要是有什么dom操作可能渲染下页面
    // 4.开始下一轮tic,执行上个宏任务里的异步代码,其实就是相当于第二轮的宏任务了,然后又是一样的程序,又把这个第二轮的宏任务里的同步代码执行完

    console.log('script宏任务1开始')
    setTimeout(() => {
      console.log('settimeout1宏任务开始')
      setTimeout(() => {
        console.log('settimeout2宏任务')
        setTimeout(() => {
          console.log('settimeout5宏任务')
        }, 0);
      }, 0);
      new Promise((resolve, reject) => {
        console.log(3)
        resolve()//此处如果不写resolve,那么promise的状态就会一直处于等待,只有执行了resolve才会变成resolve状态,.then才会执行
      }).then(() => {
        console.log(4)
      }).catch(() => {
      })
      console.log('settimeout1宏任务结束')
    }, 0);


    // 如果一个宏任务里有过个宏任务,那么就会从第一个宏任务开始事件循环

    setTimeout(() => {
      console.log('settimeout3宏任务开始')
      setTimeout(() => {
        console.log('settimeout4宏任务')
        setTimeout(() => {
          console.log('settimeout6宏任务')
        }, 0);
      }, 0);
      new Promise((resolve, reject) => {
        console.log(5)
        resolve()//此处如果不写resolve,那么promise的状态就会一直处于等待,只有执行了resolve才会变成resolve状态,.then才会执行
      }).then(() => {
        console.log(6)
      }).catch(() => {
      })
      console.log('settimeout3宏任务结束')
    }, 0);

    new Promise((resolve, reject) => {
      console.log(1)
      resolve()//此处如果不写resolve,那么promise的状态就会一直处于等待,只有执行了resolve才会变成resolve状态,.then才会执行
    }).then(() => {
      console.log(2)
    }).catch(() => {
    })
    console.log('script宏任务1结束')
    // 执行宏任务的所有同步代码

    // script宏任务开始
    // 1
    // script宏任务结束

    // 把微任务清空

    // 2

    // 执行宏任务里的异步代码,也就是上一个宏任务里的宏任务,也就是执行这个宏任务里的所有同步代码,又开始这一个宏任务的事件循环

    // settimeout1宏任务开始
    // 3
    // settimeout1宏任务结束

    // 把微任务清空

    // 4

    // 在上一个宏任务那一层,看看还有没有异步代码,有就去执行,其实是一层一层的执行宏任务,并不是说会先死命往一个宏任务里执行完,看执行结果便知
    // script里的第二个异步宏任务,也就是上一个宏任务里的继续往下执行下面的宏任务,也就是执行这个宏任务里的所有同步代码,又开始这一个宏任务的事件循环

    // settimeout3宏任务开始
    // 5
    // settimeout3宏任务结束

    // 清空微任务

    // 6

    // 在上一个宏任务那一层,看看还有没有异步代码,有就去执行
    // settimeout2宏任务

    // 在上一个宏任务那一层,看看还有没有异步代码,有就去执行

    // settimeout4宏任务
  </script>
  <script>
    console.log('script宏任务2开始')
    console.log('script宏任务2结束')
  </script>
  <!-- <script src="./test2.js"></script> -->
</body>

</html>

宏任务与微任务和事件循环

可以看到执行结果确实如预测的一般,所以这就是每轮都一样的宏任务.微任务的事件循环

 

 

本文地址：https://blog.csdn.net/qq_41430522/article/details/114274124

上一篇： css animation配合SVG制作能量流动效果

下一篇： c语言压缩文件详细讲解

推荐阅读