个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
34
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章浅谈javascript事件环微任务和宏任务队列原理由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
JS 事件环 。
JS 程序的运行是离不开事件环机制的，这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数，事情发生的时候 JS 会将相应的函数入栈执行然后出栈，但是关于事件环我们还有一些未知的东西，例如，setTimeout 我们习惯称他为定时器，但是可能很多人没有意识到，这个东西和我们常用的一些事件没什么不同，只不过我们通常所说的事件大多需要用户触发，而 setTimeout 不用用户自己触发，而是指定时间之后触发；那么问题来了，如果我们将时间设置为 0 会发生什么？会立即执行么?
setTimeout、DOM或者 HTTP请求这部分其实并不在 v8 引擎中，这些属于 web API，javascript 是一个单线程的语言，也就意味着一次只能做一件事情，这个事实从未改变 。
执行原理 。
JS 中所有的方法都会被推入栈中执行，执行完成被弹出，在遇到异步代码的时候，例如 setTimeout MutationObserver Promise 异步的部分会由其他掌管 webAPI 的地方执行，等异步有结果之后，回调函数会进入相应的队列，Promise MutationObserver 回调进入微任务队列，setTimeout setInterval requestAnimationFrame 进入宏任务队列。等待主线程的执行栈空了，微任务队列立刻被推入栈中执行，执行完毕开始执行宏任务队列 。
一个经典的例子 。
html 。
|
1
2
3
|
<
div
class
=
"outer"
>
<
div
class
=
"inner"
></
div
>
</
div
>
|
js 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// Let's get hold of those elements
var
outer = document.querySelector('.outer
');
var inner = document.querySelector('
.inner
');
// Let'
s listen
for
attribute changes on the
// outer element
new
MutationObserver(
function
() {
console.log(
'mutate'
);
}).observe(outer, {
attributes:
true
,
});
// Here's a click listener…
function
onClick() {
console.log('click
');
setTimeout(function () {
console.log('
timeout
');
}, 0);
Promise.resolve().then(function () {
console.log('
promise
');
});
outer.setAttribute('
data-random
', Math.random());
}
// …which we'
ll attach to both elements
inner.addEventListener(
'click'
, onClick);
outer.addEventListener(
'click'
, onClick);
|
以上代码在，手动点击 inner 元素的时候会有如下输出 。
click promise mutate click promise mutate timeout timeout 。
截止 2020年8月份 chrome edge opera firefox 的结果是统一的，但是在此之前的版本可能会有不同的输出.
一个奇怪的现象 。
上述代码我们不使用手动触发点击，而是使用 inner.click() 触发点击，其结果会有很大的不同 。
click click promise mutate promise timeout timeout 。
造成以上巨大差异的原因是，手动点击，不是通过函数进入执行栈的方式触发点击事件的回调，所以inner 的回调执行完了主线程中的执行栈就是空的可以直接执行队列中任务，然后事件冒泡导致的回调函数才被推入栈运行；而 click 方法的点击则是通过将 click 推入栈中执行来达到的，inner 的点击回调执行完了之后 click 方法并没有被弹出栈，而是直接执行冒泡的下一个回调，由于下一个回调有一个重复的 属性设置 这是不会重复触发 MutationObserver的所以 mutate 的输出只会有一个。等所有的冒泡回调被执行完毕 click 函数才会被弹出栈.
最后注意，浏览器会尽量预先执行较为敏感的操作.
以上就是浅谈javascript事件环微任务和宏任务队列原理的详细内容，更多关于JavaScript 事件环的资料请关注我其它相关文章！ 。
原文链接：https://www.cnblogs.com/o00o/p/13648927.html 。
最后此篇关于浅谈javascript事件环微任务和宏任务队列原理的文章就讲到这里了,如果你想了解更多关于浅谈javascript事件环微任务和宏任务队列原理的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
34
4
0
我遇到一种情况，我需要从某个主题读取(正在进行的)消息并将它们放入另一个 Queue 中。我怀疑我是否需要 jms Queue 或者我可以对内存中的 java Queue 感到满意。我将通过同一 jv
队列也是一种操作受限的线性数据结构，与栈很相似。 01、定义 栈的操作受限表现为只允许在队列的一端进行元素插入操作，在队列的另一端只允许删除操作。这一特性可以总结为先进先出（First In
队列的定义 队列(Queue):先进先出的线性表 队列是仅在队尾进行插入和队头进行删除操作的线性表 队头(front)：线性表的表头端,即可删除端 队尾(rear)：线性表的表尾端,即可插入端 由于这
Redis专题-队列 首先，想一想 Redis 适合做消息队列吗？ 1、消息队列的消息存取需求是什么？redis中的解决方案是什么？ 无非就是下面这几点： 0、数据可以顺序读
0. 学习目标 栈和队列是在程序设计中常见的数据类型，从数据结构的角度来讲，栈和队列也是线性表，是操作受限的线性表，它们的基本操作是线性表操作的子集，但从数据类型的角度来讲，它们与线性表又有着巨大的不
我想在 redis + Flask 和 Python 中实现一个队列。我已经用 RQ 实现了这样的查询，如果你有 Flask 应用程序和任务在同一台服务器上工作，它就可以正常工作。我想知道是否有可能创
我正在使用 Laravel 5.1，我有一个大约需要 2 分钟来处理的任务，这个任务特别是生成报告...... 现在，很明显，我不能让用户在我接受用户输入的同一页面上等待 2 分钟，而是我应该在后台处
我正在使用 Azure 队列，并且有多个不同的进程从队列中读取数据。 我的系统的构建方式假设每条消息只读取一次。 这个Microsoft article声称 Azure 队列具有至少一次传送保证，这可
我正在创建一个Thread::Queue元素数组。 我这样做是这样的: for (my $i=0; $i new; } 但是，当我在每个队列中填充这样的元素时 $queues[$index]->enq
我试图了解如何将我的 Mercurial 补丁推送到远程存储库(例如 bitbucket.org)，而不必先应用它们(实际上提交它们)。我的动机是在最终完成之前首先对我的工作进行远程备份，并且能够与其
我的本地计算机上有一个 Mercurial 队列补丁，我需要与同事共享该补丁，但我不想将其提交到上游存储库。有没有一种简单的方法可以打包该补丁并与他分享？ 最佳答案 mq 将补丁作为不带扩展名的文
Java 中是否有任何类提供与 Queue 相同的功能，但有返回对象的选项，并且不要删除它，只需将其设置在集合末尾？ 最佳答案 Queue不直接提供这样的方法。但是，您可以使用 poll 和 add
我在Windows上使用Tortoise svn客户端，我需要能够一次提交来自不同子文件夹的更改文件-一次提交。像在提交之前将文件添加到队列中之类的？我该怎么做？ Windows上是否还有另一个svn
好吧，我正在尝试对我的 DSAQueue 类进行单元测试，它显示我的 isEmpty()、isFull() 和 dequeue() 方法失败。 以下是我的 DSAQueue 代码。我认为我的 Dequ
我想尽量减少对传入请求的数据库查询。它目前需要写入 6 个不同的表。在返回响应之前不需要完成处理。因此，我考虑了 laravel 队列，但我想知道我是否也可以摆脱写入队列/作业表所需的单独查询。我可以
我正在学习队列数据结构。我想用链表创建队列。我想编程输出:10 20程序输出:队列为空-1 队列为空-1 我哪里出错了？ 代码如下: class Node { int x; Node next
“当工作人员有空时，他们会根据主题的优先级列表从等待请求池中进行选择。在时间 t 到达的所有请求都可以在时间 t 进行分配。如果两名工作人员同时有空，则安排优先权分配给最近的工作最早安排的人。如果仍然
我正在开发一个巨大的应用程序，它使用一些子菜单、模式窗口、提示等。 现在，我想知道在此类应用程序中处理 Esc 和单击外部事件的正确方法。 $(document).keyup(function(e)
所以 如果我有一个队列 a --> b --> NULL; 当我使用函数时 void duplicate(QueueNodePtr pHead, QueueNodePtr *pTail) 它会给 a
我正在尝试为键盘输入实现 FIFO 队列，但似乎无法让它工作。我可以让键盘输入显示在液晶显示屏上，但这就是我能做的。我认为代码应该读取键盘输入并将其插入队列，然后弹出键盘输入并将值读取到液晶屏幕上。有
我是一名优秀的程序员,十分优秀！