前端业务或者面试中经常会碰见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高