摸进她的内裤里疯狂揉她,欧美xxxx做受欧美69

快捷導(dǎo)航

JavaScript宏任務(wù)(macrotask)和微任務(wù)(microtask) 執(zhí)行順序?qū)嵗斀?/h1>

更新時間：2023年10月09日 10:44:54 作者：奧特曼

JavaScript是單線程指的是同一時間只能干一件事情,只有前面的事情執(zhí)行完,才能執(zhí)行后面的事情,這篇文章主要介紹了JavaScript宏任務(wù)(macrotask)和微任務(wù)(microtask) 執(zhí)行順序,需要的朋友可以參考下

一、JavaScript單線程

JavaScript是單線程指的是同一時間只能干一件事情，只有前面的事情執(zhí)行完，才能執(zhí)行后面的事情。導(dǎo)致遇到耗時的任務(wù)時后面的代碼無法執(zhí)行。

在此之前啊我們必須了解同步和異步

1. 同步任務(wù)（synchronous）

    console.log(123);
    console.log(456);
    for (let i = 1; i <= 5; i++) {
      console.log(i);
    }

顧名思義得到的一定是順序執(zhí)行

2. 異步任務(wù)（asynchronous）

    setTimeout(() => {
      console.log('定時器');
    }, 0)
    console.log('奧特曼');

按普通的執(zhí)行順序來說定時器在上面應(yīng)該先輸出定時器在輸出奧特曼

最后拿到的結(jié)果卻先輸出奧特曼在輸出了定時器原因呢就是 setTimeout是異步任務(wù)

補充一個知識點 setTimeout的定時器不管延遲多少毫秒也是異步的每個瀏覽器的時間也是不同的，各個瀏覽器都有差異但定義了0 最小也是4毫秒

二、任務(wù)隊列(task queue)

通過上面代碼知道setTimeout是異步的我們就搞清了執(zhí)行順序優(yōu)先級 同步代碼>異步代碼所以說在任務(wù)隊列中分為兩大類 1.同步任務(wù) 2. 異步任務(wù)

1.執(zhí)行棧

（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧（execution context stack）。

（2）主線程之外，還存在一個"任務(wù)隊列"（task queue）。只要異步任務(wù)有了運行結(jié)果，就在"任務(wù)隊列"之中放置一個事件。

（3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會讀取"任務(wù)隊列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。

（4）主線程不斷重復(fù)上面的第三步，稱為事件循環(huán)(Event Loop)。

簡單舉個梨子

同樣都是去吃飯但是p2 省去了出去的時間過程

簡單了解后我們再來深入了解異步任務(wù)中的宏任務(wù)（macrotask ）和微任務(wù)（microtask ）

個人理解：對于宏任務(wù)和微任務(wù) 可以理解為兩種異步的形態(tài)，異步有兩個孩子宏任務(wù) 和微任務(wù)

宏任務(wù)中的方法：1. script (可以理解為外層同步代碼，作為入口 ) 2. setTimeout/setInterval

微任務(wù)中的方法：1.Promise 2. nextTick

而他們的執(zhí)行順序是微任務(wù) 先輸出在輸出宏任務(wù)

口說無憑上代碼

    setTimeout(() => {
      console.log('定時器');
    }, 0)
    new Promise((resolve) => {
      console.log('同步代碼')  
      resolve('異步代碼')
    }).then((res) => {
      console.log(res);   
    })
    console.log('奧特曼');

注意奧 new Promise是創(chuàng)建一個構(gòu)造函數(shù) 這個過程是同步的，而.then方法是異步的所以代碼先執(zhí)行同步>微任務(wù)>宏任務(wù)

為了更加詳細(xì) 用圖來描述執(zhí)行過程下面的圖有一丁丁大學(xué)習(xí)不怕費流量哦

這些圖在融合一下

擴展一下setTimeout的理解

疑問點1 同步代碼執(zhí)行完了 setTimeout會從0計時嗎

    setTimeout(() => {
      console.log('setTimeout');
    }, 1000);
    console.log('奧特曼');
    for (let i = 0; i < 1000; i++) {
      console.log('');
    }

此時要表明的是我在for循環(huán)的時候setTimeout也會去計時他會去開啟一個定時器模塊，所以說執(zhí)行主線程的時候，定時器模塊已經(jīng)開始執(zhí)行了，所以不會再去等待1秒去執(zhí)行

(千萬別以為同步執(zhí)行完了，再去計時哦)

疑問點2：兩個定時器上面的定時器先執(zhí)行在執(zhí)行下面的定時器嗎？

測驗我們只修要在加一個定時器看看誰先執(zhí)行就好了

    setTimeout(() => {
      console.log('setTimeout1');
    }, 2000);
    setTimeout(() => {
      console.log('setTimeout2');
    }, 1000);

結(jié)果發(fā)現(xiàn) 如果有兩個定時器，時間少的會優(yōu)先放到主線程里去執(zhí)行

疑問點3：定義一個變量為0 設(shè)置兩個一樣的定時器事件他會輸出什么結(jié)果？ (面試題)

    i = 0
    setTimeout(() => {
      console.log(++i);  //1
    }, 1000);
    setTimeout(() => {
      console.log(++i);  //2 
    }, 1000);

看到現(xiàn)在肯定要知道定時器宏任務(wù)不是一起執(zhí)行的依次執(zhí)行??！

宏任務(wù)、微任務(wù) 執(zhí)行順序面試題

    console.log('1');
    setTimeout(function () {
      console.log('2');
      process.nextTick(function () {
        console.log('3');
      })
      new Promise(function (resolve) {
        console.log('4');
        resolve();
      }).then(function () {
        console.log('5')
      })
    })
    process.nextTick(function () {
      console.log('6');
    })
    new Promise(function (resolve) {
      console.log('7');
      resolve();
    }).then(function () {
      console.log('8')
    })
    setTimeout(function () {
      console.log('9');
      process.nextTick(function () {
        console.log('10');
      })
      new Promise(function (resolve) {
        console.log('11');
        resolve();
      }).then(function () {
        console.log('12')
      })
    })

答案：

第一輪執(zhí)行外面同步代碼： 1 7

第二輪執(zhí)行微任務(wù) ： 6 8

第三輪宏任務(wù) 第一個setTimeout : 同步 2 4 微任務(wù) 3 5 第二個setTimeout：同步 9 11 微任務(wù) 10 12

整體答案： 1、7 、6、8、2、4、3、5、9、11、10、12

2021.8.6

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        console.log(1);
        setTimeout(()=>{
            console.log(2);
        },20)
        console.log(3);
        setTimeout(()=>{
            console.log(4);
        },0)
        console.log(5);
        setTimeout(()=>{
            console.log(6);
        },10)
        console.log(9);
        setTimeout(()=>{
            console.log(10);
        },10)
        for(var i =0;i<4047999;i++){}
        console.log(7);
        setTimeout(()=>{
            console.log(8);
        },10)
        console.log(11);
        setTimeout(()=>{
            console.log(12);
        },10)
    </script>
</body>
</html>

答案：1 3 5 9 7 11 4 6 10 2 8 12

剛開始整個同步代碼宏任務(wù)： 1 3 5 9 7 11

setTimeout宏任務(wù)：4 6 10 2 8 12

為什么執(zhí)行2 不執(zhí)行下面的呢因為for循環(huán)中已經(jīng)執(zhí)行了阻塞了下面的代碼定時器模塊2已經(jīng)輸出了所以在執(zhí)行下面的，更重要的是和你的瀏覽器運行速度有很大的關(guān)系上面的for循環(huán)中的4047999 是針對我瀏覽器的運行速度，不斷的刷新可能出現(xiàn)不同的結(jié)果。你可以繼續(xù)把這個數(shù)加大那么一直先輸出的都是2 如果你調(diào)的很小那么2就會最后輸出

到此這篇關(guān)于JavaScript宏任務(wù)(macrotask)和微任務(wù)(microtask) 執(zhí)行順序的文章就介紹到這了,更多相關(guān)js宏任務(wù)和微任務(wù)執(zhí)行順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: