详细图解js的Event Loop机制
所有来自截图是慕课网双越老师,此片为自学笔记,如有侵权会立即删除
js如何执行
- 从前到后,一行行代码执行。
- 某一行代码报错,则停止下面代码的执行
- 先执行完同步代码,再执行异步代码
event loop(事件循环/事件轮询)的具体过程
先看一段简单的代码
再看一下机制图:下面的call stack是调用栈,用来调用执行代码的,webApIs就是不是ES的语法,调用的是DOM或BOM的一些内容的代码,callback queue是回调队列。
看看执行上面代码的具体过程
上图执行第一行代码,将其推入调用栈
执行完成后清空调用栈,并在浏览器的控制台输出
执行第二行代码,不会直接输出,会先将第一个函数放在webapis里面,要等5s
清空
执行第三行代码输出在控制台,代码全部执行完
同步代码执行完,马上启动Event Loop机制,一遍一遍的循环知道等5s到时,callback queue出现 回调函数cb1 如下
最后移入调用栈 输出全部