JS | 宏任務&微任務面試題

目錄

1、概念

2、面試題

2.1

2.2

2.3

2.4

3、資源福利

---

1、概念

1. 宏任務：DOM事件回調、Ajax回調、定時器回調
2. 微任務：Promise回調、Mutation回調
3. 宏任務需要在所有微任務執行完之後再去執行

順序：同步隊列=>微任務=>宏任務

2、面試題

2.1

setTimeout(()=>{
    console.log(1)
})
Promise.resolve().then(()=>{
    console.log(2)
})
Promise.resolve().then(()=>{
    console.log(4)
})
console.log(3)  //3 2 4 1

2.2

setTimeout(() => {
    console.log(1)
})
new Promise((resolve) => {
    console.log(3)
    resolve()
}).then(() => {
    console.log(2)
}).then(() => {
    console.log(4)
})
console.log(5) // 3 5 2 4 1

2.3

const first = () => new Promise((resolve, reject) => {
    console.log(3)
    let p = new Promise((resolve, reject) => {
        console.log(7)
        setTimeout(() => {
            console.log(5)
            resolve(6)
        })
        resolve(1)
    })
    resolve(2)
    p.then((arg) => {
        console.log(arg)
    })
})

first().then((arg) => {
    console.log(arg)
})
console.log(4) // 3 7  4 1 2 5

// 關鍵點:由於p之前已經resolve(1)，再resolve(3)無效

2.4

setTimeout(()=>{
    console.log("0")
})
new Promise((resolve,reject)=>{
    console.log("1")
    resolve();
}).then(()=>{
    console.log("2")
    new Promise((resolve,reject)=>{
        console.log("3")
        resolve()
    }).then(()=>{
        console.log("4")
    }).then(()=>{
        console.log("5")
    })
}).then(()=>{
    console.log("6")
})

new Promise((resolve,reject)=>{
    console.log("7")
    resolve()
}).then(()=>{
    console.log("8")
}) // 1 7 2 3 8 4 6 5 0

// 關鍵點:每次.then() 都會new Promise()

3、資源福利

1. 《手寫Promise》