Javascript 宏任务，微任务

客官°小女子只卖身不卖艺 2022-12-22 06:25 282阅读 0赞

微任务：promise，process.nextTick  
宏任务：setTimeout，setInterval，I/O，script  
同一次事件循环中，微任务永远在宏任务之前执行

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]

setTimeout(function(){ 
        console.log('定时器开始啦')
    });
    
    new Promise(function(resolve){ 
        console.log('马上执行for循环啦');
        for(var i = 0; i < 10000; i++){ 
            i == 99 && resolve();
        }
    }).then(function(){ 
        console.log('执行then函数啦')
    });
    
    console.log('代码执行结束');
    
    马上执行for循环啦 --- 代码执行结束 --- 执行then函数啦 --- 定时器开始啦

首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里
    
    遇到 new Promise直接执行,打印"马上执行for循环啦"
    
    遇到then方法,是微任务,将其放到微任务的【队列里】
    
    打印 "代码执行结束"
    
    本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"执行then函数啦"
    
    到此,本轮的event loop 全部完成。
    
    
    下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"

async function async1() { 
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    async function async2() { 
        console.log( 'async2' )
    }
    async1()
    console.log( 'script start' )
    
    执行结果
    async1 start
    async2
    script start
    async1 end

一旦遇到await 就立刻让出线程,阻塞后面的代码
    
    等候之后,对于await来说分两种情况
    
    不是promise 对象
    是promise对象
    如果不是promise,await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完毕后,在回到async内部,把promise的东西,作为await表达式的结果
    
    如果它等到的是一个 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。
    
    如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

async function t1 () { 
      console.log(1)
      console.log(2)
      await new Promise(resolve => { 
        setTimeout(() => { 
          console.log('t1p')
          resolve()
        }, 1000)
      })
      await console.log(3)
      console.log(4)
    }
    
    async function t2() { 
      console.log(5)
      console.log(6)
      await Promise.resolve(console.log('resolve')).then(() => console.log('t2p'))
      console.log(7)
      console.log(8)
    }
    
    t1()
    t2()
    
    console.log('end')
    
    1,2,5,6,resolve,end,t2p,7,8,t1p,3,4

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/986a75a14c434d2c96e2128ec76f8f4b.png