理解js的事件循环Event Loop

前端业务或者面试中经常会碰见js的执行先后顺序,里面的坑很多,这时候就是在考察你有没有理解事件循环了
那么什么是事件循环Event Loop呢?
因为js是单进程的,所以有了异步,同步异步出现后就有了事件执行的先后顺序
简单说,就是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。

异步分为宏任务和微任务
宏任务:整体的Script setTimeout setInterval
微任务:Promise process.nextTick(事件轮询,定义一个动作.并且在下一个事件轮询的时间点上执行。)

有微则微,无微则宏(记住这句话)
在这里插入图片描述
下面我们举一个简单的例子

setTimeout(function() {
    
    
    console.log('1');
})

new Promise(function(resolve) {
    
    
    console.log('2');
    resolve(true)
}).then(function() {
    
    
    console.log('3');
})

console.log('4');

执行输出

2,4,3,1

顺序:微任务promise->console->then->setimeout
理解以后给你们看看我前端面试遇到的事件循环的面试题

      console.log("1");
      setTimeout(function(){
    
    
         console.log("2");
         proces.nextTick(function(){
    
    
            console.log("3");
         })
         new Promise(function(resolve){
    
    
            console.log("4");
            resolve();
         }).then(function(){
    
    
            console.log("5");
         })
      })
      process.nextTick(function(){
    
    
         console.log("6");
      })
      new Promise(function(resolve){
    
    
         console.log("7");
         resolve();
      }).then(function(){
    
    
         console.log("8");
      })

      setTimeout(function(){
    
    
         console.log("9");
         process.nextTick(function(){
    
    
            console.log("10");
         })
         new Promise(function(resolve){
    
    
            console.log("11")
            resolve();
         }).then(function(){
    
    
            console.log("12")
       })

    })
     //promise优先级比process.nextTick高

执行结果为

 1,7,6,8,2,4,3,5,9,11,10,12

这里记住 同是微任务promise优先级比process.nextTick高

猜你喜欢

转载自blog.csdn.net/weixin_42821697/article/details/114907209