事件循环中的宏任务和微任务执行顺序

先来了解一下事件循环、宏任务、微任务和Promise

1.事件循环（Event Loop）运行机制

执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

2.宏任务、微任务

执行顺序：先宏后微

宏任务（发起者:宿主（Node、浏览器））:
script(整体代码)、setTimeout、setInterval、setImmediate(Node.js 环境)、UI事件、I/O（Node.js）

微任务（发起者: JS引擎）:
Promise、MutaionObserver、process.nextTick（Node.js）

3. Promise

定义: Promise对象用于表示一个异步操作的最终完成 (或失败)及其结果值

Promise把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
1.promise构造函数是同步执行，then方法是异步执行
2.微任务（入队的Promise回调）的优先级高于宏任务（入队的setTimeout()回调）

4.例子演示

      setTimeout(() => {console.log("4");setTimeout(() => {console.log("8");}, 0);new Promise((r) => {console.log("5");//构造函数是同步的r();}).then(() => {console.log("7");//then()是异步的，这里已经入队});console.log("6");}, 0);new Promise((r) => {console.log("1");//构造函数是同步的r();}).then(() => {console.log("3");//then()是异步的，这里已经入队});console.log("2");

运行结果：

5.执行流程与总结

总结： 在执行 宏任务 之前，要先把已入队的 微任务 全部执行完，再执行下一条 宏任务

如果说法有错误，欢迎指正！

事件循环中的宏任务和微任务执行顺序相关推荐

JS事件循环中的宏任务和微任务执行顺序
1. 宏任务和微任务事件其中微任务的优先级高于宏任务,括号内为事件运行环境宏任务微任务 I/O事件/onClick点击事件 process.netTick (Node) setTimeout N ...
宏任务和微任务执行顺序_确保任务的执行顺序
宏任务和微任务执行顺序有时有必要对线程池中的任务施加一定的顺序. JavaSpecialists通讯的第206期提出了一种这样的情况:我们使用NIO从多个连接中读取数据. 我们需要确保来自给定连接的 ...
宏任务与微任务执行顺序（超详细讲解）
前言写此之前,也查阅了很多文章,并结合自己的理解,说说对Event Loop模型的理解.以及对Promise.async/await在任务队列中的影响进行了分析,也给出了多种情形的任务案例以及分析解 ...
简单易懂的宏任务和微任务执行顺序
背景很多朋友在写面试题:宏任务与微任务的执行时机时,容易犯迷糊.之前我也写过两篇文章,这次加上详细的讲解,让大家更容易理解. 什么是宏任务.微任务? 1.首先要称得上是宏任务.微任务的,必须是一个回 ...
JavaScript中的宏任务和微任务
先来个例子如果能很快知道执行的顺序结果,那么说明你对这块的内容理解非常深刻. <div class="parent" data-spm="2.2.2.2" ...
在事件循环中使用暂停器
问题描述在典型的应用程序堆栈中,多个线程用于服务事件.处理数据.流水线等.一个重要的设计考虑是线程如何意识到有工作要做,一些通用方法包括: 信号/通知:在这种情况下,接收线程让步(即,被添加到等待队 ...
探究点击事件在JavaScript事件循环中的表现
JavaScript的事件循环event loop很多文章都写的非常详细了.这里也不多做介绍. 在很多文章中都有介绍鼠标事件Mouse Event是属于macrotask.本文探究一下Mouse Ev ...
❤️一起谈一谈js中的宏任务和微任务！
前面面试的文章中我们说过一道关于宏任务和微任务的题: setTimeout(function(){console.log('1') });new Promise(function(resolve){c ...
【JS】JavaScript中的宏任务和微任务
目录概念宏任务微任务运行机制总结 js是一门单线程语言,所以它本身是不可能异步的,但是js的宿主环境(比如浏览器.node)是多线程,宿主环境通过某种方式(事件驱动)使得js具备了异步的属性 ...

事件循环中的宏任务和微任务执行顺序

事件循环中的宏任务和微任务执行顺序

1.事件循环（Event Loop）运行机制

2.宏任务、微任务

3. Promise

4.例子演示

5.执行流程与总结

事件循环中的宏任务和微任务执行顺序相关推荐

最新文章

热门文章