最近面试别人的时候发现好多前端都捣鼓不清事件循环机制跟promise,单独出个文章希望可以帮助更多的人。
都知道js是单线程的。这地方就不赘述了,主打一个简洁。
先说同步:排队执行的任务,只有前一个任务执行完毕,才能执行下一个任务。
通俗点说:一群人排队过独木桥呢,只能一个一个过,如果有个遭天谴了被雷劈倒在独木桥上了,那么独木桥就过不去了,这就是代码阻塞。
// 例如:
const num = 1;
function fun(){
console.log(123)
}
fun();
console.log(num);
//执行顺序是 从上到下从左到右一行一行的执行的。执行到fun();的时候会开始执行函数, 函数执行完了再执行console.log(num);
//所以最后会打印出 123 1
再说异步:当js引擎解释到异步代码的时候,会把这个异步代码放到任务队列中,等这个异步有结果了再通知主线程去执行。
通俗点说:一群人排队过独木桥呢,有个人突然地肚子疼了,这时候他说:你们先走,我让一个神仙把我移出去我先解决一下。你们先走,等他解决完了,让神仙把他放到桥上继续过桥,这个就是异步。
//例如:
console.log(1);
console.log(2);
setTimeout(()=>{
console.log(3)
},0)
console.log(4);
// 打印结果:1 2 4 3
// ‘3’去上厕所了所以慢了,最后打印出来3
异步又分为宏任务跟微任务;
宏任务概念:由宿主(浏览器、node)发起的任务就是宏任务。
微任务概念:js自己发起的任务就是微任务。微任务的优先级要高于宏任务的。
例如:
//宏任务
setTimeout(()=>{
console.log(3)
},0);
//微任务
Promise.resolve().then(() => {
console.log('b')
})
我的理解:js引擎解释代码的时候从上到下依次执行,当遇到异步代码的时候会把异步代码放到任务队列中继续往下执行。当代码(同步代码)执行完了js引擎空闲之后,再从任务队列中拿一个任务继续执行,如果碰到了微任务,就先执行微任务,等微任务执行完了之后再去执行宏任务。当拿到的这个任务执行完了之后再去到任务队列中去拿,然后执行,执行完了之后再去任务队列中拿,直到任务队列中空了,那也就执行完毕了。
Promise:Promise是异步编程的一种解决方案(官方的),我理解的就是用来解决回调地狱的构造函数。
new Promise是同步代码,但是.then是微任务,微任务是异步的一种,所以.then是异步的哦。
例如:
console.log(1);//同步代码
setTimeout(()=>{ //异步代码宏任务
console.log(2)
},0);
Promise.resolve().then(() => {//异步代码微任务
console.log('3')
});
new Promise(function (resolve) {
console.log("4"); // 同步代码
resolve();
}).then(function () { //异步代码微任务
console.log("5");
});
// 打印结果 1 4 3 5 2
打完收工
如果有写的不对的地方,欢迎大佬指正。咱们相互学习,共同进步