Event loop微任务宏任务

最新推荐文章于 2024-04-20 11:25:31 发布

原创最新推荐文章于 2024-04-20 11:25:31 发布 · 758 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6

es6 专栏收录该内容

2 篇文章

订阅专栏

本文详细讲解了JavaScript中的微任务（如Promise和async/await）与宏任务（如setTimeout、setInterval和Ajax）的区别，以及它们在执行顺序中的角色。通过实例演示，展示了宏任务和微任务如何影响代码执行流程，以及await关键字在不同情况下的行为。

1. 微任务、宏任务

宏任务包括：setTimeout setInterval Ajax Dom事件
微任务: promise async/await
注意：微任务比宏任务的执行时间要早

使用异步的场景

定时任务 ：seTimeout, setInverval
网络请求：ajax请求，动态<img>加载
事件绑定

2. 执行具体步骤顺序

先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中
遇到异步微任务则将异步微任务放入微任务队列中
当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行
微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

await 之后，做什么？
分两种情况：

1.不是promise对象

如果不是 promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果

2.是promise对象

如果它等到的是一个 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。

3. 面试试题


    async function async1() {
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    
    async function async2() {
        console.log( 'async2' )
    }
    
    console.log( 'script start' )
    
    setTimeout( function () {
        console.log( 'setTimeout' )
    }, 0 )
    
    async1();
    
    new Promise( function ( resolve ) {
        console.log( 'promise1' )
        resolve();
    } ).then( function () {
        console.log( 'promise2' )
    } )
    
    console.log( 'script end' )

分析

1.直接打印同步代码 console.log(‘script start’)

首先是2个函数声明，虽然有async关键字，但不是调用我们就不看。然后首先是打印同步代码 console.log('script start')

2.将 setTimeout 放入宏任务队列

3.调用 async1( )，打印内部同步代码 console.log( ‘async1 start’ )

4. 遇到await async2()

1.它先计算出右侧的结果，2.然后看到await后，中断async函数

- 先得到await右侧表达式的结果。执行async2()，打印同步代码console.log('async2'), 并且return Promise.resolve(undefined)
- await后，中断async函数，先执行async外的同步代码

被阻塞后，执行async之外的代码

5. 执行async2()，打印同步代码console.log('async2'),

6.执行new Promise()，Promise构造函数是直接调用的同步代码，所以 console.log( ‘promise1’ )

代码运行到promise.then()

代码运行到promise.then()，发现这个是微任务，所以暂时不打印，只是推入当前宏任务的微任务队列中。

7.打印同步代码console.log( ‘script end’ )

8.执行微任务 await 打印console.log( ‘async1 end’ )

9.执行微任务打印 promise2

10.执行宏任务 setTimeout 打印console.log(‘setTimeout’)

答案

     script start
     async1 start
     async2
     promise1
     script end
     async1 end
     promise2
     setTimeout