js执行机制事件循环,js响应事件

　　本文通过分析一段代码的打印顺序，让你深入了解javascript中的事件执行机制，希望对你有所帮助！

　　前段时间做了个测试，有点迷茫。今天深入分析一下JS的事件执行机制。【相关推荐：javascript学习教程】

先看一段代码

　　你可以试着写出打印顺序。

单线程

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

　　JS的发布其实是为了蹭Java的人气，其中写这种语言的时间比较短，所以JS是单线程的原因。

JS执行机制

　　 JS既然是单线程，就必然要对任务进行排序。所有的任务都将按照一个规则来执行。

　　同步任务

　　异步任务

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

　　这是一个同步任务。直接转到主线程。

　　是一个异步任务，进入事件表并注册回调函数事件队列。

　　当所有同步任务完成后，JS将读取事件队列中的函数并执行它。

　　这个过程将一直重复，直到所有任务完成。这就是我们常说的事件循环。

JS如何判断执行栈为空

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

异步任务

　　异步任务执行顺序为：宏任务3354微任务。

　　异步任务可以分为

　　宏任务

　　微任务

常见的宏任务

　　输入/输出

　　定时器

　　设置间隔

常见的微任务

　　承诺。然后。捕捉

答案

　　在Vite之前配置的一个插件的版本有些问题。不要担心这个红色警报。

分析

　　作为同步任务启动，首先进入执行堆栈。

　　执行task()函数，A是同步任务，进入执行栈。

　　Async/await是异步到同步的过程，第一行代码会同步执行，后面的代码是异步的。b作为同步任务进入执行堆栈。

　　End变成异步任务的微任务，进入执行栈。

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

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

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

　　那么问题来了，不是宏观任务会比微观任务执行的早吗？为什么setTimeout在结束后打印？

　　看这张照片。

　　SetTimeout作为宏任务进入任务队列。所以这就是原因。

　　一般来说：

　　Asycawait导致了微任务的出现，但是这个微任务属于当前的宏任务。因此，会先执行一个end，然后判断当前宏任务是否完成。执行下一个宏任务并打印出setTimeout。

继续走流程

　　 c由于承诺的改变，同步任务进入任务队列。

　　End作为Promise派生的微任务进入任务队列。

　　d .作为同步任务进入任务队列。

目前为止，同步任务队列

　　 a

　　b

　　c

　　d

目前为止，异步任务队列

　　结束微任务

　　结束微任务

　　SetTimeout宏任务

　　所以打印顺序如下

后记

　　你自己对JS执行机制的理解可能有些不准确。我希望你能指出他们。

　　【相关视频教程推荐：web前端】以上是深入分析下JS中事件执行机制的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。