Event lopp 事件循环机制（宏任务和微任务－promise和setTimeout的优先级）

今天药忘吃喽~ 2023-06-06 03:54 4阅读 0赞

首先先看看概念：  
①macro-task(宏任务)：包括整体代码script，setTimeout，setInterval  
②micro-task(微任务)：Promise，process.nextTick

宏任务和微任务的执行流程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lX25ldmVy_size_16_color_FFFFFF_t_70]  
执行机制：宏任务执行完才会去执行微任务，并且是所有的微任务。

new Promise(function(resolve){//promise里面的函数也是同步
        console.log(2)
        for( var i=0 ; i<10000 ; i++ ){
            i==9999 && resolve()
        }
        console.log(3)
    }).then(function(){//异步操作
        console.log(4)
    });
    setTimeout(function(){
    	console.log(1);//异步操作
    },0);
    console.log(5);//同步
    //2
    //3
    //5
    //4
    //1

js单线程顺序是：先同步后异步，这点很重要

这段代码作为宏任务，进入主线程。  
先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。  
接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。  
遇到console.log()，立即执行。  
好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。  
ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行。  
结束。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lX25ldmVy_size_16_color_FFFFFF_t_70]: /images/20230601/eb484c4b99a34fdb8517e510303ca37f.png