你可能不知道的 JavaScript Event Loop
一、最初理解的 Event Loop
实际上,谈到任务队列,绝大多数人第一反应就是 同步任务/异步任务、宏任务/微任务,在很多博客和帖子中也有详细的说明。在看了 winter 老师在极客时间《重学前端》这门课,发现自己对 Event Loop 了解的不够深入,是从一道题目开始:
// 写出输出顺序
function sleep(duration) {
return new Promise(function(resolve, reject) {
console.log("b");
setTimeout(resolve,duration);
})
}
console.log("a");
sleep(5000).then(()=>console.log("c"));
复制代码
好的,这道题看上去非常简单,绝大多数人都会得出这样一个事件执行顺序(同步 -> 微任务 -> 宏任务):
script start -> Promise 立即执行函数 -> Promise then 函数 -> setTimeout
从而写出了这样的一个答案:
1. a // 同步执行
2. b // Promise内部立即执行函数(同步)
3. c // 异步任务(微任务, 异步执行)
复制代码
实际上,虽然答案是正确的,但是这是个错误的执行顺序,正确的执行顺序是:
script start -> Promise 立即执行函数 -> setTimeout -> Promise then 函数
amazing! 为什么在宏任务执行之后,还会有微任务执行?不急,仔细往下看。
二、真实的 Event Loop
JavaScript 语言的一大特点就是单线程,需要执行多个任务总要有一定的规则限制执行的先后顺序,而这个规则就是我们的 Event Loop 机制,在 node 中我们可以称之为事件循环。
直接上图再次了解一下事件循环:
可以看到 Macro Task(宏任务)和 Micro Task(微任务)并不像我们想象的那样,实际上是包含关系,也可以理解成,一个宏任务包含一个微任务队列。
这样我们就能总结出解决事件循环问题的一般步骤:
- 确定宏任务数量;
- 确定宏任务中微任务的数量和调用次序;
- 确定宏任务的调用次序;
再回头看上面那道题,是不是很清晰:
- 同步执行
console.log("a")
; - 同步执行
console.log("b")
; - setTimeout “进入”宏任务队列;
- 由于 Promise 没调用 resolve(), script 宏任务不存在微任务,执行完成;
- setTimeout 宏任务执行, resolve 被调用,then 函数进入微任务队列;
- 执行 Promise then 函数,
console.log("c")
;
三、举一反三
实际上,Event Loop 是前端同学面试的时候必过的一关,也属于非常基础的内容了,单实际上只是简单理解,如果Event Loop 和 Promise 等知识结合,从百度一搜,往往会搜到很多看起来令人“头大”的面试题:
// 写出输出顺序
async function async1() {
console.log('async1');
}
async function async2() {
console.log('async2 start');
await async1();
console.log('async2 end');
}
console.log('start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
async2();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('end’);
复制代码
实际上,结合之前提到的规律,我们完全可以做出以下归纳:
- 确定宏任务数量(2个)
- 确定宏任务中微任务的数量和调用次序(script: ['async2 end', 'promise2'], setTimeout: [])
- 确定宏任务的调用次序(script -> setTimeout)
可以得到如下题解:
- 同步执行
console.log('start')
/console.log('async2 start')
/console.log('async1')
/console.log('promise1')
/console.log('end’)
; - 执行微任务队列
console.log('async2 end')
/console.log('promise2')
; - 执行 setTimeout
console.log('setTimeout')
; - setTimeout 没有微任务,结束。
当然,本题还涉及 Async/Await 的知识,建议大家详细了解下阮一峰老师的《ES6入门教程》es6.ruanyifeng.com/#docs/async
四、总结
工作中遇到这种问题,才发现自己之前学的路子有很野,实际上工作中完全触碰不到这里的知识,总结就是深入思考才能从原理了解知识。
五、参考
- 《重学前端》time.geekbang.org/column/intr…
- 《Tasks, microtasks, queues and schedules》jakearchibald.com/2015/tasks-…
- 《JavaScript 运行机制详解:再谈Event Loop》www.ruanyifeng.com/blog/2014/1…
相关文章
- Python使用tkinter组件Label显示简单数学公式
- 内网渗透之DCOM横向移动
- 以目标为导向的语义交流的共同语言——一个课程学习框架
- python爬虫前奏【成信笔记】
- HTML 5 File API:文件拖放上传功能
- 教你快速创建 Python 虚拟环境
- pyenv 实现Python多版本自由切换
- 用 Python 对 Excel文件进行批量操作
- Python - 接入钉钉机器人
- Python - 抓取 iphone13 pro 线下店供货信息并发送到钉钉机器人,最后设置为定时任务
- crontab - 解决 mac 下通过 crontab 设置了 Python 脚本的定时任务却无法运行
- [源码解析] PyTorch分布式(5) ------ DistributedDataParallel 总述&如何使用
- Python科普系列——类与方法(上篇)
- SAP对STO的交货单执行PGI,报错 -Fld selectn for mvmt type 643 acct 400020 differs
- Spring Boot 实现通用 Auth 认证的 4 种方式
- 盘点4种使用Python批量合并同一文件夹内所有子文件夹下的Excel文件内所有Sheet数据
- OushuDB 学习经验分享(三):技术特点
- Java和Python思维方式的不同之处
- Python中日志记录新技能
- 奥比中光Gemini OpenCV—Python使用