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

宏任务
分类: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

你可能感兴趣的:(前端技术,javascript)