javascript中事件执行机制的示例分析
小编给大家分享一下javascript中事件执行机制的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是专业的改则网站建设公司,改则接单;提供网站建设、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行改则网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
先看一段代码
各位小伙伴可以试着写出打印顺序
单线程
JS
主要作为浏览器的脚本语言,Js
的主要用途是操作DOM,这就决定了JS
必须是单线程,如果JS
如Java一样是多线程,如果两个线程同时操作DOM,那么浏览器应该怎么执行呢?
JS
的发布其实是为了蹭Java的热度,其中编写这门语言的时间并不久,所以这也就是为什么JS是单线程的原因
JS执行机制
JS既然是单线程,那么必然会对任务进行一个排序。所有的任务都将按照一个规则执行下去。
同步任务
异步任务
同步任务和异步任务进入执行栈中,JS会先判断任务的类型
是同步任务,直接进入主线程
是异步任务,进入
Event Table
中,注册回调函数Event Queue
同步任务全部执行结束,JS会
Event Queue
中读取函数执行这个过程会反复执行,直到全部任务执行结束。这就是我们常说的
事件循环
JS如何判断执行栈为空
emmmm,我不知道。。。。JS应该有一套自己独有的逻辑去判断执行栈是否为空。
异步任务
异步的任务执行顺序为:宏任务——>微任务
异步任务可分为
宏任务
微任务
常见的宏任务
I/0
setTimeout
setInterval
常见的微任务
Promise
.then
.catch
答案
vite 之前配置的一个插件,版本有些问题,不要管这个红色报警
分析
开始了
是一个同步任务,最先进入执行栈中执行
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 宏任务
所以打印顺序如下
以上是“javascript中事件执行机制的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文题目:javascript中事件执行机制的示例分析
URL网址:http://scyanting.com/article/jhcchc.html