JS --- 宏任务与微任务

习题

实践是检验真理的唯一标准

// 第一题
    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')

JS --- 宏任务与微任务_第1张图片

你可能感兴趣的:(javascript)