宏任务和微任务讲解(附带例题)

宏任务
分类:setTimeout、setInterval、requestAnimationFrame
特点:

  1. 宏任务所处的队列即为宏任务队列
  2. 第一个宏任务队列只有一个任务,执行主线程中的js代码
  3. 宏任务队列可以有多个
  4. 当宏任务队列中的任务执行完毕之后,会查看是否有微任务队列,有则执行微任务 队列中的任务,没有则查看是否有宏任务队列

微任务
分类:Promise的回调函数、 process.nextTick
特点:

  1. 微任务所处的队列即为微任务队列
  2. 只有一个微任务队列
  3. 在上一个宏任务队列执行完毕之后如果有微任务队列就会执行微任务队列中的所有任务

例题讲解

        console.log("start");

        setTimeout(()=>{
            console.log("setTimeout");
        },0);
        
        new Promise((resolve,reject)=>{
            for(var i=0;i<5;i++){
                console.log(i);
            }
            resolve() //修改promise状态为成功
        }).then(()=>{
            console.log("promise回调函数");
        })

        console.log("end");
    第一个宏任务队列
    执行主线程上的代码

    第二个宏任务
    setTimeout

    微任务队列
    new Promise.then()

    1、先执行主线程上的同步代码,输出start
    2、遇到setTimeout将其加入到宏任务队列等待执行
    3、遇到promise 立即执行,输出 0,1,2,3,4
    4、遇到promise的回调函数将其加入到微任务队列
    5、执行主线程的同步代码,输出end
    6、第一个宏任务队列执行完毕查看存在微任务队列,执行微任务队列中的任务,输出promise的回调函数
    7、微任务执行完毕,执行下一个宏任务队列中的任务,输出setTimeout
    
    输出:
    start
    0
    1
    2
    3
    4
    end
    promise回调函数
    setTimeout
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值