我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线：400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

javascript中事件执行机制的示例分析

小编给大家分享一下javascript中事件执行机制的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联是专业的改则网站建设公司，改则接单;提供网站建设、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行改则网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

先看一段代码

各位小伙伴可以试着写出打印顺序

javascript中事件执行机制的示例分析

单线程

JS主要作为浏览器的脚本语言，Js的主要用途是操作DOM，这就决定了JS必须是单线程，如果JS如Java一样是多线程，如果两个线程同时操作DOM，那么浏览器应该怎么执行呢？

JS的发布其实是为了蹭Java的热度，其中编写这门语言的时间并不久，所以这也就是为什么JS是单线程的原因

JS执行机制

JS既然是单线程，那么必然会对任务进行一个排序。所有的任务都将按照一个规则执行下去。

  • 同步任务

  • 异步任务

javascript中事件执行机制的示例分析

同步任务和异步任务进入执行栈中，JS会先判断任务的类型

  • 是同步任务，直接进入主线程

  • 是异步任务，进入Event Table中，注册回调函数Event Queue

  • 同步任务全部执行结束，JS会Event Queue中读取函数执行

  • 这个过程会反复执行，直到全部任务执行结束。这就是我们常说的事件循环

JS如何判断执行栈为空

emmmm，我不知道。。。。JS应该有一套自己独有的逻辑去判断执行栈是否为空。

异步任务

异步的任务执行顺序为：宏任务——>微任务

异步任务可分为

  • 宏任务

  • 微任务

常见的宏任务

  • I/0

  • setTimeout

  • setInterval

常见的微任务

  • Promise

  • .then

  • .catch

答案

vite 之前配置的一个插件，版本有些问题，不要管这个红色报警

javascript中事件执行机制的示例分析

分析

  • 开始了 是一个同步任务，最先进入执行栈中

  • 执行task()函数， a是一个同步任务，进入执行栈中

  • async/await 是异步转同步的过程，第一行代码会同步执行，以下的代码会异步。b作为一个同步任务进入执行栈中

  • a end成为了异步任务的微任务，进入执行栈中，

目前为止，同步任务队列依次是 开始了, a, b

目前为止，异步任务队列依次是 宏任务: setTimeout 微任务：a end

如果没有后续代码，打印顺序如下

javascript中事件执行机制的示例分析

那么问题来了，不是说宏任务会比微任务提前执行吗，为什么setTimeout打印在a end之后呢？

看这张图

javascript中事件执行机制的示例分析

setTimeout 作为了宏任务进入了任务队列。所以造成了这种原因

通俗来讲：

async await 导致了微任务的产生，但是这个微任务所属于当前的宏任务。所以会先执行a end，执行完毕判断当前宏任务结束。执行下一个宏任务，打印出了setTimeout

继续走流程

  • c 由于Promise的转化，变为同步任务进入到任务队列中

  • c end 作为Promise衍生的微任务进入任务队列

  • d 作为同步任务进入任务队列

目前为止，同步任务队列

  • a

  • b

  • c

  • d

目前为止，异步任务队列

  • a end 微任务

  • c end 微任务

  • setTimeout 宏任务

所以打印顺序如下

javascript中事件执行机制的示例分析

以上是“javascript中事件执行机制的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


当前名称：javascript中事件执行机制的示例分析
文章来源：http://shouzuofang.com/article/jhcchc.html

其他资讯