[005]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》