一段代码让你了解Event-Loop
console.log(1);
setTimeout(() => {
console.log(2);
}, 0);
new Promise((resolve, reject) => {
console.log(3);
resolve();
}).then(data => {
console.log(4);
setTimeout(() => {
console.log(5);
}, 0);
});
复制代码
讲解之前先看一段代码,可以先预测一下代码的执行结果,首先打印了1,然后是一个定时器,因为js是单线程,所以代码不会等到定时器执行完在继续代码,定时器会放到异步队列里面,等到合适的时机再执行。再下面是一个promise,那么promise什么时候执行呢?
(1)所有同步任务都在主线程上执行,形成一个 执行栈 。 (2)主线程之外,还存在一个"宏任务队列" 。只要异步任务有了运行结果(例如定时器的时间到了,或者ajax请求回来数据了等等),就在"宏任务队列"之中放置一个事件(对应的回调函数)。 (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"微任务队列"里面的任务,微任务执行完,再看看"宏任务队列"里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。 (4)主线程不断重复上面的第三步。
说了那么多,Event-Loop到底是啥?
上面一直在说微任务,宏任务,当前执行栈,浏览器怎么能知道什么时候执行宏任务,什么时候执行微任务,其实有一个这样的机制不断检查是否该执行微任务了,或者宏任务。(这是个非常简易的描述了,实际上会复杂很多)而这样的操作就被称为Event Loop。
微任务和宏任务都有哪些
#####宏任务
* | 浏览器 | node |
---|---|---|
I/O | ✅ | ✅ |
setTimeout | ✅ | ✅ |
setInterval | ✅ | ✅ |
setImmediate | ❌ | ✅ |
requestAnimationFrame | ✅ | ❌ |
#####微任务
* | 浏览器 | node |
---|---|---|
Promise.then catch finally | ✅ | ✅ |
process.nextTick | ❌ | ✅ |
MutationObserver | ✅ | ❌ |