一个悲伤的故事
我是19应届的,但是秋招还是没拿到Offer,也许是我期望太高,要求太高,亦或许是其他。。。现在打算好好再学习一些更深层次的知识,决战春招,舍友拿了58的17K的offer,人比人得死(虽然现在秋招还没结束,但是好的公司没几个在招人了)
那么我们进入正题吧,用一段代码来说明这个事件循环(Event Loop)的原理:
//这里我用花括号包起来防止污染
{
const log = console.log;
log('代码开始');//这里是运行环境代码,就是Context Script
new Promise((resolve, reject) => {
//这里的代码相当于Promise的构造函数,你new之后,这里会直接执行
log("微任务A构造执行");
resolve();
}).then(() => {
//then是异步回调,我假设你们都懂Promise的哈
log("微任务A回调");
});
log("微任务A已添加");
setTimeout((args) => {//setTimeout的回调函数可以拿到setTimeout的第三个参数(数组)
log('宏任务X执行,,,', args);
new Promise((resolve, reject) => {
log("微任务B构造执行");
resolve();
}).then(() => {
log("微任务B回调");
});
log("微任务B已添加");
}, 0, [1, 2, 3, 4]);//这个比较冷门,setTimeout的第三个参数,一个数组,这里提一下而已。。。
log("宏任务X已添加");
setTimeout((args) => {
log('宏任务Y执行,,,', args);
}, 0, [1, 2])
log("宏任务Y已添加");
}
输出结果:
代码开始
微任务A构造执行
微任务A已添加
宏任务X已添加
宏任务Y已添加
微任务A回调
宏任务X执行,,, (4) [1, 2, 3, 4]
微任务B构造执行
微任务B已添加
微任务B回调
宏任务Y已添加
宏任务Y执行,,, (2) [1, 2]
理解
执行一个宏任务(栈中没有就从任务队列中获取)
执行过程中遇到微任务,就将它加入微任务队列
宏任务执行完毕,立即依次执行所有微任务,直到微任务队列为空
当前宏任务执行完毕,开始检查渲染,GUI线程接管渲染
渲染完毕后,JS线程接管,开始下一个宏任务(从事件队列中开始)
(宏任务和微任务的分类自行搜索)
图解: