js中的event-loop

秒速五厘米 2022-09-15 15:53 194阅读 0赞

事件循环机制由三部分组成，调用栈、微任务队列、消息队列，

1、event-loop开始的时候，会从全局一行一行地执行，遇到函数调用，会压入到调用栈中，被压入的函数被称之为帧，当函数返回后，会从调用栈中弹出。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

首先程序执行 fun2 ,fun2压入到调用栈中，接着输出2，然后执行fun1,fun1压入到调用栈中，接着输出1，

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

fun1执行完毕后，弹出调用栈，然后输出3

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

最终fun2也弹出调用栈

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

2、当js中存在异步操作，比如fetch、setTimeout、setInterval，压入到调用栈的时候，里面的消息会进入到消息队列中，消息队列中会等到调用栈被清空后执行

function func1(){
            console.log(1)
        }
        function func2(){
            setTimeout(()=>{
                console.log(2)
            },0)
            func1()
            console.log(3)
        }
        func2

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

首先func2被压入到调用栈中，接着 setTimeout(()=>\{console.log(2)\},0)被压入到调用栈中，其中console.log(2)被分到消息队列中，接着func1被压入到调用栈中，然后输出1，func1被弹出调用栈，接着输出3，最后 执行消息队列中的，输出2

3、promise、async、await的异步操作的时候，会加入到微任务中去，会在调用栈清空的时候立即执行；用栈中加入的微任务会立马执行；微任务队列中全部执行完后，执行消息队列中的

var p = new Promise(resolve =>{
        console.log(4)
        resolve(5)
    })
    
    function func1(){
        console.log(1)
    }
    
    function func2(){
        setTimeout(()=>{
            console.log(2)
        },0)
        func1();
        console.log(3)
        p.then(resolve => {
            console.log(resolve)
        })
    }
    func2();

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

首先p会加入到微任务中，会立即执行输出4，resolve(5)被加入到微任务队列中，然后执行func2，被加入到调用栈中，接着setTimeout(()=>\{console.log(2)\},0)被加入到消息队列中， 接着执行func1，被加入到调用栈中，输出1然后输出3，接着执行微任务队列中的5，最后执行消息队列中的，输出2

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8c58204e5e344506abdf2ff6f4dbc17e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/9e66f387a5ab47c7bd6fe31d68d8a068.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/5ca306267d714ea89a7857c8c6411c42.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/1cb74bc0bc504c0083dcb0a1ab8ad3d2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/8fbc746e491a4afda4bdd223ddea8ff9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/8c0c6a12cfc04fe3af81fb86e166f33d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl0dGxlIGxpdHRsZQ_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/877705ab1c9e4c3ebe3f0004a193e255.png