异步代码微任务宏任务案例

案例一

process.nextTick(()=>{console.log("111");})

const promise = new Promise(resolve=>{
    console.log("222");
    resolve()
})

setTimeout(()=>{console.log("333");},100)

promise.then(()=>{console.log("444");})


/*
    执行结果 =>
     2 同步代码
     1 微任务老大
     4 微任务
     3 宏任务
 */

案例二

Promise.resolve().then(()=>{console.log("111");})

process.nextTick(()=>{
    console.log("222");
})

setTimeout(()=>{
    console.log("333");
},0)

console.log("444");

/*
    4 同步代码
    2 微任务老大
    1 微任务
    3 宏任务
 */

案例三

console.log("111");

setTimeout(()=>{
    console.log("222");
},0)

new Promise((resolve)=>{
    console.log("333");
    resolve()
})
.then(()=>{
    console.log("444");
})
.then(()=>{
    console.log("555");
})

console.log("666");

/*
    1 同步代码
    3 同步代码
    6 同步代码
    4 微任务
    5 微任务
    2 宏任务
 */

案例四

process.nextTick(()=>{
    console.log("111");
})

setTimeout(()=>{
    console.log("222");
},0)

const promise = Promise.resolve()
promise.then(()=>{
    console.log("333");
    process.nextTick(()=>{
        console.log("444");
    })
    setTimeout(()=>{
        console.log("555");
    },0)
})
.catch(()=>{
    console.log("666");
})


/*
    1 微任务老大
    3 微任务
    4 微任务中的微任务老大
    2 宏任务
    5 微任务中的宏任务
 */

案例五

process.nextTick(()=>{
    console.log("111");
})

setTimeout(()=>{
    console.log("222");
},0)

const promise = Promise.resolve()
promise.then(()=>{
    console.log("333");
    process.nextTick(()=>{
        console.log("444");
    })
    setTimeout(()=>{
        console.log("555");
    },0)
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject(111)
        },0)
    })
})
.catch(()=>{
    // console.log(res);
    console.log("666");
})


/*
    1 微任务老大
    3 微任务
    4 微任务中微任务老大
    2 宏任务
    5 微任务中的宏任务
    6 微任务中的宏任务
 */

案例六

const promise = new Promise((resolve,reject)=>{
    console.log(111);
    setTimeout(() => {
        console.log(222);
        resolve("success")
        console.log(333);
    }, 0);
    console.log(444);
})
promise.then((res)=>{
    console.log(555);
})
console.log(666);

/*
    1 同步代码
    4 同步代码
    6 同步代码
    2 宏任务中的同步代码
    3 宏任务中的同步代码
    5 宏任务中的微任务

 */
posted @   饼MIN  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示