本篇文章通过分析一段代码的打印顺序 ， 带大家深入了解一下javascript中的事件执行机制 ， 希望对大家有所帮助！
文章插图
前段时间一道笔试题 ， 有点迷糊 。 今天彻底分析下JS的事件执行机制 。 【相关推荐：javascript学习教程】
先看一段代码各位小伙伴可以试着写出打印顺序
文章插图
单线程
JS主要作为浏览器的脚本语言 ， Js的主要用途是操作DOM ， 这就决定了JS必须是单线程 ， 如果JS如Java一样是多线程 ， 如果两个线程同时操作DOM ， 那么浏览器应该怎么执行呢？ JS的发布其实是为了蹭Java的热度 ， 其中编写这门语言的时间并不久 ， 所以这也就是为什么JS是单线程的原因 JS执行机制JS既然是单线程 ， 那么必然会对任务进行一个排序 。 所有的任务都将按照一个规则执行下去 。
- 同步任务
异步任务
文章插图
同步任务和异步任务进入执行栈中 ， JS会先判断任务的类型
- 是同步任务 ， 直接进入主线程
是异步任务 ， 进入
Event Table中 ， 注册回调函数Event Queue 同步任务全部执行结束 ， JS会
Event Queue中读取函数执行 这个过程会反复执行 ， 直到全部任务执行结束 。 这就是我们常说的
事件循环 异步任务异步的任务执行顺序为：宏任务——>微任务
异步任务可分为
- 宏任务
微任务
- I/0
setTimeout
setInterval
- Promise
.then
.catch
文章插图
分析
开始了 是一个同步任务 ， 最先进入执行栈中 执行
task()函数 ， a是一个同步任务 ， 进入执行栈中 async/await 是异步转同步的过程 ， 第一行代码会同步执行 ， 以下的代码会异步 。
b作为一个同步任务进入执行栈中 a end成为了异步任务的微任务 ， 进入执行栈中 ， 开始了, a, b 目前为止 ， 异步任务队列依次是 宏任务:
setTimeout 微任务：a end 如果没有后续代码 ， 打印顺序如下
文章插图
那么问题来了 ， 不是说宏任务会比微任务提前执行吗 ， 为什么
setTimeout打印在a end之后呢？ 看这张图 
文章插图
setTimeout 作为了宏任务进入了任务队列 。 所以造成了这种原因
通俗来讲：
async await 导致了微任务的产生 ， 但是这个微任务所属于当前的宏任务 。 所以会先执行
a end ， 执行完毕判断当前宏任务结束 。 执行下一个宏任务 ， 打印出了setTimeout 继续走流程
c 由于Promise的转化 ， 变为同步任务进入到任务队列中 c end 作为Promise衍生的微任务进入任务队列 d 作为同步任务进入任务队列 - a
b
c
d
- a end 微任务
c end 微任务
setTimeout 宏任务
文章插图
后记自己对JS执行机制的理解 ， 可能会有些不正确的地方 ， 希望各位大佬指出 。
【相关视频教程推荐：web前端】
以上就是深入分析下JS中的事件执行机制的详细内容 ， 更多请关注电脑自学网其它相关文章！
推荐阅读
- 一文了解CSS3中的新特性@layer
- 红警OL下载游戏领红包
- 传统节日课文二年级下课文内容 传统节日课文二年级下
- 下载app免费提现0.30元到微信/支付宝
- 应用商城下载:绿洲app 4天领取3r
- 牙膏的妙用：帮你解决生活中的烦恼
- 茶叶在养生中的作用与功效
- 吃什么食物止痛：生活中的天然止痛药，你知道吗？
- 没结果的感情要狠心，这样才能快速放下！
- 手机下载新浪新闻抽随机红包