宏任務與微任務和事件回圈-有解無憂

首先

// 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://www.uj5u.com/qianduan/265408.html

標籤：其他

上一篇：vue中axios的封裝使用

下一篇：JAVA正則運算式的使用