宏任務與微任務

習題

實踐是檢驗真理的惟一標準

// 第一題
    console.log(1)
    setTimeout(()=>{
        console.log(3)
    })
    setTimeout(()=>{
        console.log(4)
    })
    var p = new Promise((res,rej)=>{
        console.log(5)
        res()
    })
    p.then(()=>{
        console.log(6)
    })
    console.log(2)
    // 執行順序 1 5 2 6 3 4

// 第二題
    let fn = () => {
        console.log(1)
        let a = new Promise((resolve, reject) => {
            console.log(2)
            resolve(3)
        })
        console.log(4)
        return a
    }
    fn().then(data => console.log(data))
    // 執行順序 1 2 4 3

setTimeout 和 setInterval、Promise是分層執行
這裏涉及一個 宏任務和微任務的概念

宏任務和微任務

微任務（Microtasks）
宏任務（task）

js會優先執行宏任務 宏任務能夠同時有多個 但會按順序一個一個執行

每個宏任務 後面均可以跟一個微任務隊列 若是微任務隊列中有指令或方法 那麼就會執行 若是沒有 則開始執行下一個宏任務 直到全部的宏任務執行完爲止

宏任務佔用性能 須要一些較早就準備好的方法 排在最後才執行的時候 又不想新增一個宏任務 那麼就能夠把這些方法 一個一個的放在微任務隊列裏面 在這個宏任務中的代碼執行完後 就會執行微任務隊列

// 第一題 解析
    console.log(1) // 1 宏任務
    setTimeout(()=>{ // 1 宏任務
        console.log(3) // 延後執行
    })
    setTimeout(()=>{ // 1 宏任務
        console.log(4) // 延後執行
    })
    var p = new Promise((res,rej)=>{ // 1 宏任務
        console.log(5)
        res() 
    })
    p.then(()=>{ // 微任務
        console.log(6)
    })
    console.log(2) // 1 宏任務
    // 第一輪 先把宏任務執行完畢 
    // 第二輪 Promise參數有了 先執行 後執行延後任務
    
    //第二題同理

若是尚未明白 就看這個

console.log('第一輪 宏1')
    Promise.resolve().then(() => {
        console.log('第二輪 Promise宏》微1')
        Promise.resolve().then(() => {
            console.log('第三輪 Promise宏》微1》（宏這裏沒有須要執行的東西）》微 ')
            Promise.resolve().then(() => {
                console.log('第四輪 Promise宏》微1》（宏這裏沒有須要執行的東西）》微》（宏這裏沒有須要執行的東西）》微')
            }) // 新加行
        }) // 新加行
    })
    setTimeout(() => {
        console.log('最後一輪 setTimeout 延後執行')
    });
    Promise.resolve().then(() => {
        console.log('第二輪 Promise宏》微2')
    })
    setTimeout(() => {
        console.log('最後一輪 setTimeout 延後執行')
    });
    console.log('第一輪 宏2')