详细图解js的Event Loop机制


所有来自截图是慕课网双越老师,此片为自学笔记,如有侵权会立即删除

js如何执行

  • 从前到后,一行行代码执行。
  • 某一行代码报错,则停止下面代码的执行
  • 先执行完同步代码,再执行异步代码

event loop(事件循环/事件轮询)的具体过程

先看一段简单的代码
详细图解js的Event Loop机制
再看一下机制图:下面的call stack是调用栈,用来调用执行代码的,webApIs就是不是ES的语法,调用的是DOM或BOM的一些内容的代码,callback queue是回调队列。
详细图解js的Event Loop机制

看看执行上面代码的具体过程

详细图解js的Event Loop机制
上图执行第一行代码,将其推入调用栈
详细图解js的Event Loop机制
执行完成后清空调用栈,并在浏览器的控制台输出

详细图解js的Event Loop机制
执行第二行代码,不会直接输出,会先将第一个函数放在webapis里面,要等5s
详细图解js的Event Loop机制
清空

详细图解js的Event Loop机制
执行第三行代码输出在控制台,代码全部执行完

同步代码执行完,马上启动Event Loop机制,一遍一遍的循环知道等5s到时,callback queue出现 回调函数cb1 如下
详细图解js的Event Loop机制

最后移入调用栈 输出全部
详细图解js的Event Loop机制

总结

详细图解js的Event Loop机制
详细图解js的Event Loop机制